Gibi bir formda bir seçenek oluşturmak istiyorum

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

Burada selectbox yalnızca onay kutusu işaretlendiğinde etkinleştirilir ve işaretlenmediğinde devre dışı bırakılır.

Bu kod ile geldim:

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

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

<select>JQuery kullanarak nasıl devre dışı bırakılır / etkinleştirilir ?

Bunun gibi bir kod kullanmak istiyorsunuz:

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

İşte çalışan örnek

Seçimleri devre dışı bırakabilmek / etkinleştirebilmek için öncelikle seçimlerinizin bir kimlik veya sınıfa ihtiyacı vardır. Sonra böyle bir şey yapabilirsiniz:

Devre Dışı:

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

Etkinleştirme:

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

Engelli bir olan Boole Özellik ait seçme elemanı belirttiği gibi WHATWG araçlarının, DOĞRU İÇİN DEVRE jQuery ile olacağını

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

Bu, bu HTML'yi

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

Bu hem XHTML hem de HTML (W3School başvurusu) için çalışır

Yine de mülk olarak kullanılarak da yapılabilir

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

alma

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

XTML için değil, yalnızca HTML için çalışır

NOT: Devre dışı bırakılan bir öğe, bu soruda yanıtlandığı şekilde formla birlikte gönderilmez: Devre dışı bırakılan form öğesi gönderilmez

NOT2: Devre dışı bırakılan bir öğe gri olabilir.

NOT3:

Devre dışı bırakılan bir form denetimi, kullanıcı etkileşimi görev kaynağında kuyruğa alınan tıklama olaylarının öğeye gönderilmesini engellemelidir.

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>

Sadece kullanın:

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

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

DEMO

Aşağıdakileri kullanın:

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

Ya da sadece eklemek id="pizza_kind"için <select>olduğu gibi, etiketin <select name="pizza_kind" id="pizza_kind">: jsfiddle linke

Kodunuzun çalışmamasının nedeni $("#pizza_kind"), <select>öğeyi seçmediği için öğeyi seçmemesidir id="pizza_kind".

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

Sizin selectbir kimliği, sadece adı yok. Seçicinizi değiştirmeniz gerekir:

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

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

eski iş parçacığında cevap için üzgünüm ama benim kod gelecekte diğer yardımcı olabilir. ben aynı senaryoda onay kutusu işaretlendiğinde o zaman seçilen birkaç giriş alanları diğer akıllıca devre dışı etkinleştirilecektir.

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

İyi soru - Bunu başarmanın tek yolunun seçimdeki öğ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 şeyin nasıl elde edileceğini açıklar. Teşekkürler
jQuery Seçili Radyoya dayalı SELECT seçeneklerini devre dışı bırak (Tüm tarayıcılar için desteğe ihtiyacınız var)