Ich möchte eine Option in einer Form wie erstellen

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

Dabei ist das Auswahlfeld nur aktiviert, wenn das Kontrollkästchen aktiviert ist, und deaktiviert, wenn es nicht aktiviert ist.

Ich habe mir diesen Code ausgedacht:

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

Ich habe versucht , verschiedene Methoden , wie zu setzen deaktiviert Attribut .prop(), .attr()und .disabled=. Es passiert jedoch nichts. Bei der Bewerbung auf eine <input type="checkbox">statt<select> funktioniert der Code einwandfrei.

Wie deaktiviere / aktiviere <select>ich mit jQuery?

Sie möchten folgenden Code verwenden:

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

Hier arbeitet Beispiel

Um Auswahlen deaktivieren / aktivieren zu können, benötigen Sie zunächst eine ID oder Klasse. Dann könnten Sie so etwas tun:

Deaktivieren:

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

Aktivieren:

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

Deaktiviert ist ein boolesches Attribut des Auswahlelements, wie von WHATWG angegeben. Dies bedeutet, dass der RECHTE WEG ZUM DEAKTIVIEREN mit jQuery wäre

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

Dies würde diesen HTML machen

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

Dies funktioniert sowohl für XHTML als auch für HTML (W3School-Referenz)

Es kann aber auch als Eigentum verwendet werden

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

bekommen

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

Was nur für HTML und nicht für XTML funktioniert

HINWEIS: Ein deaktiviertes Element wird nicht mit dem in dieser Frage beantworteten Formular gesendet: Das deaktivierte Formularelement wird nicht gesendet

ANMERKUNG 2: Ein deaktiviertes Element ist möglicherweise .

NOTIZ 3:

Ein deaktiviertes Formularsteuerelement muss verhindern, dass Klickereignisse, die in der Quelle der Benutzerinteraktionsaufgabe in die Warteschlange gestellt werden, für das Element ausgelöst werden.

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>

Verwenden Sie einfach:

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

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

DEMO

Verwenden Sie Folgendes:

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

Oder einfach id="pizza_kind"zum <select>Tag hinzufügen , wie zum Beispiel <select name="pizza_kind" id="pizza_kind">: jsfiddle link

Der Grund, warum Ihr Code nicht funktioniert hat, ist einfach, dass $("#pizza_kind")das <select>Element nicht ausgewählt wird , weil es nicht vorhanden ist id="pizza_kind".

Edit: Eigentlich ist ein besserer Selektor $("select[name='pizza_kind']"): jsfiddle link

Sie selecthaben keine ID, nur einen Namen. Sie müssen Ihren Selektor ändern:

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

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

Es tut mir leid, dass ich in einem alten Thread geantwortet habe, aber vielleicht hilft mein Code in Zukunft anderen. Ich war in demselben Szenario, in dem nur wenige ausgewählte Eingabefelder aktiviert werden, wenn das Kontrollkästchen aktiviert ist.

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

Gute Frage - Ich denke, der einzige Weg, dies zu erreichen, besteht darin, die Elemente in der Auswahl zu filtern.
Sie können dies über ein jquery-Plugin tun. Überprüfen Sie den folgenden Link. Er beschreibt, wie Sie etwas erreichen, das dem entspricht, was Sie benötigen. Dank
jQuery deaktiviere SELECT-Optionen basierend auf dem ausgewählten Radio (Benötige Unterstützung für alle Browser)