it-swarm.com.de

Wie deaktiviere / aktiviere ich ein Auswahlfeld mit jQuery?

Ich möchte eine Option in einem Formular wie erstellen

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

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:

<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 verschiedene Methoden ausprobiert, um deaktivierte Attribute mit .prop(), .attr() und .disabled= festzulegen. Es passiert jedoch nichts. Bei der Anwendung auf einen <input type="checkbox"> anstelle von <select> funktioniert der Code einwandfrei.

Wie kann ich <select> mit jQuery aktivieren/deaktivieren?

165
izidor

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 Selects deaktivieren/aktivieren zu können, benötigen Ihre Selects zunächst eine ID oder Klasse. Dann könnten Sie so etwas tun:

Deaktivieren:

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

Aktivieren:

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

Disabled ist ein Boolean Attribut des select-Elements wie angegeben durch WHATWG , das heißt, der RECHTE WEG, mit jQuery zu deaktivieren, wäre

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

Dies würde diese 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 Eigenschaft 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 Formular gesendet, wie in dieser Frage beantwortet: Das deaktivierte Formularelement wird nicht gesendet

HINWEIS2: Ein deaktiviertes Element ist möglicherweise ausgegraut.

HINWEIS3:

Ein deaktiviertes Formularsteuerelement muss verhindern, dass Klickereignisse in der Benutzerinteraktionstaskquelle 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>
20
Azteca

Benutze einfach:

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

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

DEMO

16

Verwenden Sie Folgendes:

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

Oder fügen Sie einfach id="pizza_kind" zu <select> hinzu, wie <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 auswählt, weil es kein id="pizza_kind" enthält.

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

8
K Z

entschuldigung für die Beantwortung im alten Thread, aber möglicherweise hilft mein Code anderen in Zukunft. Ich befand mich in demselben Szenario, in dem, wenn das Kontrollkästchen aktiviert ist, nur wenige ausgewählte Eingabefelder aktiviert sind, andernfalls deaktiviert.

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

Ihr select hat 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

5
Sampson

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. Ü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)

2
Joseph Caruana