jQuery'yi kullanarak seçim alanını nasıl devre dışı bırakır/etkinleştiririm?

Question

Kontrol etmedim zaman onay kutusunun işaretli ve engelli olduğunda selectbox etkindir

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

gibi bir formda bir seçenek oluşturmak istiyoruz.

ben bu kod ile gelip:

<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> 

nasıl .prop(), .attr() ve .disabled= kullanarak engelli özelliğini ayarlamak için çeşitli yöntemler denedi. Ancak hiçbir şey olmuyor. <select> yerine <input type="checkbox"> uygulandığında, kod mükemmel çalışır.

jQuery kullanılarak nasıl devre dışı bırakılır/etkinleştirilir <select>?

Answer 1

Böyle kodu kullanmak istiyorum: example

Answer 2

İyi soru - Bunu başarmanın tek yolunun seçmedeki öğeleri filtrelemek olduğunu düşünüyorum.
Bunu bir jquery eklentisi ile yapabilirsiniz. Aşağıdaki bağlantıyı kontrol edin, ihtiyacınız olana benzer bir şeye nasıl ulaşılacağını açıklar. Teşekkür
jQuery disable SELECT options based on Radio selected (Need support for all browsers)

Answer 3

kullanın aşağıdadır: basitçe

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

Ya <select name="pizza_kind" id="pizza_kind"> gibi <select> etiketine id="pizza_kind" ekleyin: jsfiddle link

kodunuzu işe yaramadı nedeni basitçe $("#pizza_kind") olmadığı için id="pizza_kind" olmadığı için <select> öğesinin seçilmesi.

Düzenleme: Aslında daha iyi bir seçici $("select[name='pizza_kind']") geçerli: jsfiddle link

Answer 4

/devre dışı öncelikle seçer bir kimlik veya sınıf gerekir her şeyden seçer sağlamak için edebilmek.

Devre Dışı:

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

etkinleştirme:

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

Answer 5

Sadece basit kullanın:

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

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

0 Sonra böyle bir şey yapabileceğini

Answer 6

Sizin select bir kimliği yok, sadece bir isim çalışıyor

İşte

<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> 

.Demo

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

: Eski dizisindeki yanıtlayan ama için http://jsbin.com/imokuj/2/edit

Answer 7

üzgün may benim kod future.i diğer yardımcı onay kutusu kontrol edilecek zaman aynı senaryo oldu Sen seçici değiştirmeniz gerekir Daha sonra seçilen birkaç giriş alanı diğer bilge devre dışı bırakılmış olacaktır.

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

Answer 8

Engelli, o jQuery ile

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

Bu, bu HTML

<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> 

yapacak olacağını DEVRE DIŞI İÇİN DOĞRU anlamı WHATWG belirttiği gibi select element bir Boolean Attribute olduğunu

Bu, hem XHTML and HTML (W3School reference)

için çalışır

Yine de

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

sadece HTML için çalışır

değil XTML

NOT alma özelliği

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

olarak kullanılarak yapılabilir: bir engelli eleman olmayacak Bu soruda yanıtlandığı şekilde gönderilen formu kullanarak: The disabled form element is not submitted

NOT2: Devre dışı bırakılmış bir öğe grileşebilir.

NOT3:

elemana sevk edilmesini kullanıcı etkileşimi görev kaynağına sıraya herhangi tıklama olayları önlemek gerekir devre dışı bir form kontrolü.

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>