Làm cách nào để đảm bảo trường biểu mẫu <select> được gửi khi nó bị vô hiệu hóa?

Tôi có một selecttrường biểu mẫu mà tôi muốn đánh dấu là "chỉ đọc", vì trong người dùng không thể sửa đổi giá trị, nhưng giá trị vẫn được gửi cùng với biểu mẫu. Sử dụng disabledthuộc tính ngăn người dùng thay đổi giá trị, nhưng không gửi giá trị với biểu mẫu.

Các readonlythuộc tính chỉ có sẵn cho inputvà textarealĩnh vực, nhưng đó là cơ bản những gì tôi muốn. Có cách nào để làm việc đó không?

Hai khả năng tôi đang xem xét bao gồm:

• Thay vì vô hiệu hóa select, hãy vô hiệu hóa tất cả các options và sử dụng CSS để chọn màu xám để nó trông giống như bị vô hiệu hóa.
• Thêm một trình xử lý sự kiện nhấp vào nút gửi để nó cho phép tất cả các menu thả xuống bị vô hiệu hóa trước khi gửi biểu mẫu.

<select disabled="disabled">
    ....
</select>
<input type="hidden" name="select_name" value="selected value" />

Trong trường hợp select_namelà tên mà bạn thường sẽ cung cấp cho các <select>.

Một lựa chọn khác.

<select name="myselect" disabled="disabled">
    <option value="myselectedvalue" selected="selected">My Value</option>
    ....
</select>
<input type="hidden" name="myselect" value="myselectedvalue" />

Bây giờ với cái này, tôi đã nhận thấy rằng tùy thuộc vào máy chủ web nào bạn đang sử dụng, bạn có thể phải đặt hiddenđầu vào trước hoặc sau <select>.

Nếu bộ nhớ của tôi phục vụ cho tôi một cách chính xác, với IIS, bạn đặt nó trước, với Apache bạn đặt nó sau. Như mọi khi, kiểm tra là chìa khóa.

Vô hiệu hóa các trường và sau đó kích hoạt chúng trước khi biểu mẫu được gửi:

Mã jQuery:

jQuery(function ($) {        
  $('form').bind('submit', function () {
    $(this).find(':input').prop('disabled', false);
  });
});

Tôi đã tìm kiếm một giải pháp cho việc này, và vì tôi không tìm thấy giải pháp nào trong chủ đề này nên tôi đã tự làm.

// With jQuery
$('#selectbox').focus(function(e) {
    $(this).blur();
});

Đơn giản, bạn chỉ làm mờ trường khi bạn tập trung vào nó, một cái gì đó như vô hiệu hóa nó, nhưng bạn thực sự gửi dữ liệu của nó.

Tôi đã phải đối mặt với một kịch bản hơi khác, ở chỗ tôi chỉ muốn không cho phép người dùng thay đổi giá trị được chọn dựa trên một hộp chọn trước đó. Điều cuối cùng tôi làm chỉ là vô hiệu hóa tất cả các tùy chọn không được chọn khác trong hộp chọn bằng cách sử dụng

$('#toSelect')find(':not(:selected)').attr('disabled','disabled');

Giải pháp tương tự được đề xuất bởi Tres mà không cần sử dụng jQuery

<form onsubmit="document.getElementById('mysel').disabled = false;" action="..." method="GET">

   <select id="mysel" disabled="disabled">....</select>

   <input name="submit" id="submit" type="submit" value="SEND FORM">
</form>

Điều này có thể giúp ai đó hiểu nhiều hơn, nhưng rõ ràng là kém linh hoạt hơn so với jQuery.

nó không hoạt động với: bộ chọn đầu vào cho các trường được chọn, sử dụng cái này:

    jQuery(function() {

    jQuery('form').bind('submit', function() {
        jQuery(this).find(':disabled').removeAttr('disabled');
    });

    });

Tôi sử dụng mã tiếp theo để vô hiệu hóa các tùy chọn trong các lựa chọn

<select class="sel big" id="form_code" name="code" readonly="readonly">
   <option value="user_played_game" selected="true">1 Game</option>
   <option value="coins" disabled="">2 Object</option>
   <option value="event" disabled="">3 Object</option>
   <option value="level" disabled="">4 Object</option>
   <option value="game" disabled="">5 Object</option>
</select>

// Disable selection for options
$('select option:not(:selected)').each(function(){
 $(this).attr('disabled', 'disabled');
});

Cách dễ nhất tôi tìm thấy là tạo một hàm javascript nhỏ gắn với biểu mẫu của bạn:

function enablePath() {
    document.getElementById('select_name').disabled= "";
}

và bạn gọi nó trong mẫu của bạn ở đây:

<form action="act.php" method="POST" name="form_name" onSubmit="enablePath();">

Hoặc bạn có thể gọi nó trong chức năng bạn sử dụng để kiểm tra biểu mẫu của bạn :)

Chỉ cần thêm một dòng trước khi gửi.

$ ("# XYZ"). RemoveAttr ("bị vô hiệu hóa");

Hoặc sử dụng một số JavaScript để thay đổi tên của lựa chọn và đặt thành vô hiệu hóa. Bằng cách này, lựa chọn vẫn được gửi, nhưng sử dụng tên bạn không kiểm tra.

Tôi đã tạo ra một plugin nhanh chóng (chỉ dành cho Jquery), giúp lưu giá trị trong trường dữ liệu trong khi đầu vào bị vô hiệu hóa. Điều này chỉ có nghĩa là miễn là trường bị vô hiệu hóa theo chương trình thông qua jquery bằng cách sử dụng .prop () hoặc .attr () ... sau đó truy cập giá trị bằng .val (), .serialize () hoặc .serializeArra () sẽ luôn trả về giá trị ngay cả khi bị vô hiệu hóa :)

Ổ cắm không biết xấu hổ: https://github.com/Jezternz/jq-disables-inputs

Dựa trên giải pháp của Jordan, tôi đã tạo một hàm tự động tạo một đầu vào ẩn có cùng tên và cùng giá trị của lựa chọn bạn muốn trở thành không hợp lệ. Tham số đầu tiên có thể là id hoặc phần tử jquery; thứ hai là một tham số tùy chọn Boolean trong đó vô hiệu hóa "true" và "false" cho phép đầu vào. Nếu bị bỏ qua, tham số thứ hai sẽ chuyển chọn giữa "bật" và "tắt".

function changeSelectUserManipulation(obj, disable){
    var $obj = ( typeof obj === 'string' )? $('#'+obj) : obj;
    disable = disable? !!disable : !$obj.is(':disabled');

    if(disable){
        $obj.prop('disabled', true)
            .after("<input type='hidden' id='select_user_manipulation_hidden_"+$obj.attr('id')+"' name='"+$obj.attr('name')+"' value='"+$obj.val()+"'>");
    }else{
        $obj.prop('disabled', false)
            .next("#select_user_manipulation_hidden_"+$obj.attr('id')).remove();
    }
}

changeSelectUserManipulation("select_id");

Tôi tìm thấy một giải pháp khả thi: loại bỏ tất cả các yếu tố ngoại trừ một yếu tố được chọn. Sau đó, bạn có thể thay đổi phong cách thành một cái gì đó trông cũng bị vô hiệu hóa. Sử dụng jQuery:

jQuery(function($) {
    $('form').submit(function(){
        $('select option:not(:selected)', this).remove();
    });
});

<select id="example">
    <option value="">please select</option>
    <option value="0" >one</option>
    <option value="1">two</option>
</select>



if (condition){
    //you can't select
    $("#example").find("option").css("display","none");
}else{
   //you can select
   $("#example").find("option").css("display","block");
}

Một tùy chọn khác là sử dụng thuộc tính readonly.

<select readonly="readonly">
    ....
</select>

Với chỉ đọc giá trị vẫn được gửi, trường đầu vào có màu xám và người dùng không thể chỉnh sửa nó.

Biên tập:

Trích dẫn từ http://www.w3.org/TR/html401/interact/forms.html#adef-readonly :

• Các yếu tố chỉ đọc nhận được trọng tâm nhưng người dùng không thể sửa đổi.
• Các yếu tố chỉ đọc được bao gồm trong điều hướng tab.
• Yếu tố chỉ đọc có thể thành công.

Khi nó nói phần tử có thể thành công, có nghĩa là nó có thể được gửi, như đã nêu ở đây: http://www.w3.org/TR/html401/interact/forms.html#successful-controls