Saya ingin membuat opsi dalam bentuk suka

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

di mana kotak pilih diaktifkan hanya ketika kotak centang dicentang dan dinonaktifkan ketika tidak dicentang.

Saya datang dengan kode ini:

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

Saya mencoba berbagai metode cara mengatur atribut cacat menggunakan .prop(), .attr()dan .disabled=. Namun, tidak ada yang terjadi. Saat melamar ke <input type="checkbox">alih - alih <select>, kode berfungsi dengan baik.

Bagaimana cara menonaktifkan / mengaktifkan <select>menggunakan jQuery?

Anda ingin menggunakan kode seperti ini:

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

Berikut ini contoh kerjanya

Untuk dapat menonaktifkan / mengaktifkan pilihan pertama-tama pilihan Anda memerlukan ID atau kelas. Maka Anda dapat melakukan sesuatu seperti ini:

Nonaktifkan:

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

Memungkinkan:

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

Dinonaktifkan adalah Atribut Boolean dari elemen pilih seperti yang dinyatakan oleh WHATWG , itu berarti CARA CARA UNTUK MENONAKTIFKAN dengan jQuery adalah

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

Ini akan membuat HTML ini

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

Ini berfungsi untuk XHTML dan HTML (referensi W3School)

Namun itu juga bisa dilakukan dengan menggunakannya sebagai properti

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

mendapatkan

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

Yang hanya berfungsi untuk HTML dan bukan XTML

CATATAN: Elemen yang dinonaktifkan tidak akan dikirimkan dengan formulir seperti yang dijawab dalam pertanyaan ini: Elemen formulir yang dinonaktifkan tidak dikirimkan

CATATAN2: Elemen yang dinonaktifkan dapat berwarna abu-abu.

CATATAN 3:

Kontrol formulir yang dinonaktifkan harus mencegah peristiwa klik yang antri pada sumber tugas interaksi pengguna agar tidak dikirim pada elemen.

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>

Cukup gunakan:

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

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

DEMO

Gunakan yang berikut ini:

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

Atau cukup tambahkan id="pizza_kind"ke <select>tag, seperti <select name="pizza_kind" id="pizza_kind">: tautan jsfiddle

Alasan kode Anda tidak berfungsi adalah karena $("#pizza_kind")tidak memilih <select>elemen karena tidak memiliki id="pizza_kind".

Sunting: sebenarnya, pemilih yang lebih baik adalah $("select[name='pizza_kind']"): tautan jsfiddle

Anda selecttidak memiliki ID, hanya nama. Anda harus memodifikasi pemilih Anda:

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

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

maaf untuk menjawab di utas lama tetapi semoga kode saya membantu yang lain di masa depan. i berada dalam skenario yang sama bahwa ketika kotak centang akan dicentang maka beberapa bidang input yang dipilih akan memungkinkan orang bijak lainnya dinonaktifkan.

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

Pertanyaan bagus - Saya pikir satu-satunya cara untuk mencapai ini adalah dengan memfilter item di pilih.
Anda dapat melakukan ini melalui plugin jquery. Periksa tautan berikut, ini menjelaskan cara mencapai sesuatu yang mirip dengan yang Anda butuhkan. Terima kasih
jQuery menonaktifkan opsi SELECT berdasarkan Radio yang dipilih (Perlu dukungan untuk semua browser)