Làm thế nào để vô hiệu/bật trường chọn bằng jQuery?

Question

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

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

nơi selectbox được kích hoạt chỉ khi hộp kiểm được kiểm tra và vô hiệu hóa khi không được chọn.

tôi đưa ra với 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 cho một số <input type="checkbox"> thay vì <select>, mã hoạt động hoàn hảo.

Cách tắt/bật <select> bằng jQuery?

Answer 1

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 đang làm việc example

Answer 2

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 lựa chọn.
Bạn có thể thực hiện việc này thông qua plugin jquery. Kiểm tra liên kết sau, nó mô tả cách để đạt được một cái gì đó tương tự như những gì bạn cần. Cảm ơn
jQuery disable SELECT options based on Radio selected (Need support for all browsers)

Answer 3

Sử dụng như sau:

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

Hoặc chỉ cần thêm id="pizza_kind"-<select> thẻ, như <select name="pizza_kind" id="pizza_kind">: jsfiddle link

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

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

Answer 4

Để có thể tắt/bật Lựa chọn đầu tiên của tất cả các Selects bạn cần một ID hoặc lớp học. Sau đó, bạn có thể làm một cái gì đó như thế này:

Disable:

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

Enable:

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

Answer 5

Chỉ đơn giản là sử dụng:

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

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

DEMO

Answer 6

bạn select không có một ID, chỉ có một cái tên.Bạn sẽ cần phải sửa đổi chọn của bạn:

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

Demo: http://jsbin.com/imokuj/2/edit

Answer 7

xin lỗi vì trả lời trong chủ đề cũ nhưng có thể mã của tôi giúp khác trong future.i là trong cùng một kịch bản mà khi hộp kiểm tra sẽ được kiểm tra sau đó vài trường đầu vào được chọn sẽ được bật cho người khuyết tật khôn ngoan khác.

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

Answer 8

tàn tật là một Boolean Attribute của select element như đã nêu bởi WHATWG, có nghĩa là con đường đúng để vô hiệu hóa với jQuery sẽ

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

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> 

Công trình này hoạt động cho cả hai XHTML and HTML (W3School reference)

.210

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

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

nhận

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

nào chỉ hoạt động cho HTML và không XTML

LƯU Ý: Một yếu tố vô hiệu sẽ không được đã gửi với biểu mẫu như được trả lời trong câu hỏi này: The disabled form element is not submitted

NOTE2: Một phần tử bị tắt có thể chuyển sang màu xám.

Note3:

Một điều khiển biểu mẫu có thể hủy bỏ phải ngăn chặn bất kỳ sự kiện nhấp chuột được xếp hàng đợi vào nguồn nhiệm vụ tương tác người dùng khỏi bị và gửi nó về nguyên tố này.

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>