Frage an jquery, html, forms – Wie deaktiviere / aktiviere ich ein Auswahlfeld mit jQuery?

155

Ich möchte eine Option in einem Formular wie erstellen

<code>[] I would like to order a [selectbox with pizza] pizza
</code>

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

Ich habe diesen Code gefunden:

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

Ich habe verschiedene Methoden ausprobiert, um deaktivierte Attribute mithilfe von festzulegen.prop(), .attr(), und.disabled=. Es passiert jedoch nichts. Bei der Bewerbung um eine<input type="checkbox"> anstatt<select>funktioniert der Code einwandfrei.

So deaktivieren / aktivieren Sie<select> Verwenden Sie jQuery?

Hallo, funktioniert dieser Ansatz auf IE 10? Ich weiß nicht, wie ich ein Auswahlfeld in IE 10 aktivieren soll. ROROROOROROR

Deine Antwort

8   die antwort
5

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

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

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

17

Behinderte ist einBooleanAttribut desElement auswählen wie angegeben vonWHATWGdas heißt dieRICHTIG ZU DEAKTIVIEREN mit jQuery wäre

<code>jQuery("#selectId").attr('disabled',true);
</code>

Dies würde diese HTML machen

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

Das funktioniert für beideXHTML und HTML (W3School-Referenz)

Es kann aber auch als Eigenschaft verwendet werden

<code>jQuery("#selectId").prop('disabled', 'disabled');
</code>

bekommen

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

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

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

ANMERKUNG 2: Ein deaktiviertes Element ist möglicherweise ausgegraut.

NOTIZ 3:

Ein deaktiviertes Formularsteuerelement muss verhindern, dass Klickereignisse in der Benutzerinteraktionstaskquelle für das Element ausgelöst werden.

TL; DR
<code><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>
</code>
105

benötigen Ihre Selects zunächst eine ID oder Klasse. Dann könnten Sie so etwas tun:

Deaktivieren:

<code>$('#id').attr('disabled', 'disabled');
</code>

Aktivieren:

<code>$('#id').removeAttr('disabled');
</code>
Dies sollte die ausgewählte Antwort sein .. viel besser zum Überfliegen :) quemeful
"Die .prop () -Methode sollte verwendet werden, um" disabled "und" checked "anstelle der .attr () -Methode zu setzen." Source:api.jquery.com/prop Colin
@Colin, beide funktionieren, also sehe ich kein Problem. Black
14

Benutze einfach:

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

update_pizza();
$("#pizza").change(update_pizza);
</code>

DEMO

259

Sie möchten folgenden Code verwenden:

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

Hier wird gearbeitetBeispiel

$('#pizza_kind').prop('disabled', false); und$('#pizza_kind').prop('disabled', true);. WieIn der jQuery-Dokumentation heißt es: Eigenschaften wirken sich im Allgemeinen auf den dynamischen Status eines DOM-Elements aus, ohne das serialisierte HTML-Attribut zu ändern. Beispiele sind die value-Eigenschaft von Eingabeelementen, die disabled-Eigenschaft von Eingaben und Schaltflächen oder die checked-Eigenschaft eines Kontrollkästchens. Die .prop () -Methode sollte anstelle der .attr () -Methode verwendet werden, um disabled und checked festzulegen. Die .val () -Methode sollte zum Abrufen und Festlegen von Werten verwendet werden. naor
Was ist $ (update_pizza); tun? Die Funktion in ein JQuery-Objekt einbinden? Edward
für jQuery 3 sollte es "$ ('# pizza_kind'). prop ('disabled', true / false);" Soweit ich weiss Gennady G
7

Verwenden Sie Folgendes:

<code>$("select").attr("disabled", "disabled");
</code>

Oder einfach hinzufügenid="pizza_kind" zu<select> tag, wie<select name="pizza_kind" id="pizza_kind">: jsfiddle Link

Der Grund, warum Ihr Code nicht funktioniert hat, liegt einfach daran$("#pizza_kind") wählt das nicht aus<select> Element, weil es nicht hatid="pizza_kind".

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

5

aber möglicherweise hilft mein Code anderen in Zukunft. Ich befand mich im selben Szenario, in dem, wenn das Kontrollkästchen aktiviert ist, nur wenige ausgewählte Eingabefelder aktiviert sind, andernfalls deaktiviert.

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

der einzige Weg, dies zu erreichen, besteht darin, die Elemente in der Auswahl zu filtern.
Sie können dies über ein JQuery-Plugin tun. Über den folgenden Link erfahren Sie, wie Sie etwas erreichen, das Ihren Anforderungen entspricht. Vielen Dank
jQuery deaktiviert SELECT-Optionen basierend auf dem ausgewählten Radio (Unterstützung für alle Browser erforderlich)

Verwandte Fragen