Tôi muốn tạo một tùy chọn trong một hình thức như

[] I would like to order a [selectbox with pizza] pizza

trong đó selectbox chỉ được bật khi hộp kiểm được chọn và tắt khi không được chọn.

Tôi nghĩ ra mã này:

<form>
<input type="checkbox" id="pizza" name="pizza" value="yes"> <label for="pizza">
I would like to order a</label>
<select name="pizza_kind">
    <option>(choose one)</option>
    <option value="margaritha">Margaritha</option>
    <option value="hawai">Hawai</option>
</select>
pizza.
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script>
var update_pizza = function () {
    if ($("#pizza").is(":checked")) {
        $("#pizza_kind").removeAttr("disabled");
    }
    else {
        $("#pizza_kind").prop('disabled', 'disabled');
    }
};

$(update_pizza);
$("#pizza").change(update_pizza);
</script>

Tôi cố gắng phương pháp khác nhau như thế nào để thiết lập thuộc tính tàn tật sử dụng .prop(), .attr()và .disabled=. Tuy nhiên, không có gì xảy ra. Khi áp dụng <input type="checkbox">thay thế <select>, mã hoạt động hoàn hảo.

Làm cách nào để tắt / bật <select>bằng jQuery?

Bạn muốn sử dụng mã như thế này:

<form>
  <input type="checkbox" id="pizza" name="pizza" value="yes">
  <label for="pizza">I would like to order a</label>
  <select id="pizza_kind" name="pizza_kind">
    <option>(choose one)</option>
    <option value="margaritha">Margaritha</option>
    <option value="hawai">Hawai</option>
  </select>
  pizza.
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
  var update_pizza = function () {
    if ($("#pizza").is(":checked")) {
        $('#pizza_kind').prop('disabled', false);
    }
    else {
        $('#pizza_kind').prop('disabled', 'disabled');
    }
  };
  $(update_pizza);
  $("#pizza").change(update_pizza);
</script>

Đây là ví dụ làm việc

Để có thể vô hiệu hóa / kích hoạt các lựa chọn trước hết, các lựa chọn của bạn cần có ID hoặc lớp. Sau đó, bạn có thể làm một cái gì đó như thế này:

Vô hiệu hóa:

$('#id').attr('disabled', 'disabled');

Cho phép:

$('#id').removeAttr('disabled');

Vô hiệu hóa là Thuộc tính Boolean của phần tử được chọn như được nêu trong WHATWG , điều đó có nghĩa là CÁCH QUYỀN ĐỂ TUYỆT VỜI với jQuery sẽ là

jQuery("#selectId").attr('disabled',true);

Điều này sẽ làm cho HTML này

<select id="selectId" name="gender" disabled="disabled">
    <option value="-1">--Select a Gender--</option>
    <option value="0">Male</option>
    <option value="1">Female</option>
</select>

Điều này hoạt động cho cả XHTML và HTML (tham chiếu W3School)

Tuy nhiên, nó cũng có thể được thực hiện bằng cách sử dụng nó như tài sản

jQuery("#selectId").prop('disabled', 'disabled');

nhận được

<select id="selectId" name="gender" disabled>

Mà chỉ hoạt động cho HTML và không phải là XTML

LƯU Ý: Phần tử bị vô hiệu hóa sẽ không được gửi với biểu mẫu như đã trả lời trong câu hỏi này: Phần tử biểu mẫu bị vô hiệu hóa không được gửi

CHÚ THÍCH 2: Một phần tử bị vô hiệu hóa có thể bị mờ đi.

CHÚ THÍCH 3:

Điều khiển biểu mẫu bị vô hiệu hóa phải ngăn mọi sự kiện nhấp được xếp hàng trên nguồn tác vụ tương tác người dùng không được gửi trên phần tử.

TL; DR

<script>
    var update_pizza = function () {
        if ($("#pizza").is(":checked")) {
            $('#pizza_kind').attr('disabled', false);
        } else {
            $('#pizza_kind').attr('disabled', true);
        }
    };
    $(update_pizza);
    $("#pizza").change(update_pizza);
</script>

Chỉ cần sử dụng đơn giản:

var update_pizza = function () {
     $("#pizza_kind").prop("disabled", !$('#pizza').prop('checked'));
};

update_pizza();
$("#pizza").change(update_pizza);

DEMO

Sử dụng như sau:

$("select").attr("disabled", "disabled");

Hoặc chỉ cần thêm id="pizza_kind"vào <select>thẻ, như <select name="pizza_kind" id="pizza_kind">: liên kết jsfiddle

Lý do mã của bạn không hoạt động đơn giản là vì $("#pizza_kind")không chọn <select>phần tử vì nó không có id="pizza_kind".

Chỉnh sửa: thực sự, một bộ chọn tốt hơn là $("select[name='pizza_kind']"): liên kết jsfiddle

Bạn selectkhông có ID, chỉ có một tên. Bạn sẽ cần sửa đổi bộ chọn của mình:

$("#pizza").on("click", function(){
  $("select[name='pizza_kind']").prop("disabled", !this.checked);
});

Bản trình diễn: http://jsbin.com/imokuj/2/edit

xin lỗi vì đã trả lời trong luồng cũ nhưng có thể mã của tôi sẽ giúp người khác trong tương lai. Tôi đã ở trong cùng một kịch bản rằng khi hộp kiểm sẽ được kiểm tra thì một vài trường đầu vào được chọn sẽ cho phép vô hiệu hóa thông minh khác.

$("[id*='chkAddressChange']").click(function () {
    var checked = $(this).is(':checked');
    if (checked) {
        $('.DisabledInputs').removeAttr('disabled');
    } else {
        $('.DisabledInputs').attr('disabled', 'disabled');
    }
});

Câu hỏi hay - Tôi nghĩ cách duy nhất để đạt được điều này là lọc các mục trong phần chọn.
Bạn có thể làm điều này thông qua một plugin jquery. Kiểm tra các liên kết sau đây, nó mô tả làm thế nào để đạt được một cái gì đó tương tự như những gì bạn cần. Cảm ơn
jQuery vô hiệu hóa các tùy chọn CHỌN dựa trên Radio đã chọn (Cần hỗ trợ cho tất cả các trình duyệt)