Chciałbym stworzyć opcję w postaci np

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

gdzie pole wyboru jest włączone tylko wtedy, gdy pole wyboru jest zaznaczone i wyłączone, gdy nie jest zaznaczone.

Wymyślam ten kod:

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

Próbowałem różnych metod, jak ustawić atrybut disabled użyciu .prop(), .attr()oraz .disabled=. Jednak nic się nie dzieje. W przypadku zastosowania <input type="checkbox">zamiast <select>a kod działa doskonale.

Jak wyłączyć / włączyć <select>za pomocą jQuery?

Chciałbyś użyć takiego kodu:

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

Oto działający przykład

Aby móc wyłączać / włączać zaznaczenia, najpierw musisz mieć identyfikator lub klasę. Wtedy możesz zrobić coś takiego:

Wyłączyć:

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

Włączyć:

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

Wyłączone jest to logiczny atrybut z elementu select jak stwierdził WHATWG , oznacza to, że właściwy sposób, aby wyłączyć z jQuery byłoby

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

To spowodowałoby, że ten 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>

Działa to zarówno dla XHTML, jak i HTML (dokumentacja W3School)

Jednak można to również zrobić, używając go jako własności

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

uzyskiwanie

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

Który działa tylko w przypadku HTML, a nie XTML

UWAGA: Wyłączony element nie zostanie przesłany z formularzem, zgodnie z odpowiedzią na to pytanie: Wyłączony element formularza nie został przesłany

UWAGA 2: Wyłączony element może być wyszarzony.

UWAGA 3:

Formant formularza, który jest wyłączony, musi zapobiegać wysyłaniu do elementu zdarzeń kliknięcia, które są umieszczone w kolejce w źródle zadań interakcji z użytkownikiem.

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>

Po prostu użyj:

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

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

DEMO

Użyj następujących:

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

Lub po prostu dodaj id="pizza_kind"do <select>tagu, na przykład <select name="pizza_kind" id="pizza_kind">: jsfiddle link

Twój kod nie zadziałał, ponieważ $("#pizza_kind")nie wybrał <select>elementu, ponieważ go nie ma id="pizza_kind".

Edycja: właściwie lepszym selektorem jest $("select[name='pizza_kind']"): link jsfiddle

Twój selectnie ma identyfikatora, tylko imię. Musisz zmodyfikować swój selektor:

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

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

przepraszam, że odpowiadam w starym wątku, ale może mój kod pomoże innym w przyszłości. i był w tym samym scenariuszu, że gdy pole wyboru zostanie zaznaczone, to kilka wybranych pól wejściowych zostanie włączonych inne mądre wyłączone.

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

Dobre pytanie - myślę, że jedynym sposobem na osiągnięcie tego jest przefiltrowanie wybranych elementów.
Możesz to zrobić za pomocą wtyczki jquery. Sprawdź poniższy link, opisuje, jak osiągnąć coś podobnego do tego, czego potrzebujesz. Dzięki
jQuery wyłącz opcję SELECT na podstawie wybranego radia (potrzebujesz wsparcia dla wszystkich przeglądarek)