Wie kann man das Auswahlfeld mit jQuery deaktivieren/aktivieren?

Question

Ich möchte eine Option in einer Form, wie

ist nur dann aktiviert

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

wo selectbox erstellen, wenn Checkbox deaktiviert und aktiviert wird, wenn nicht überprüft.

Ich komme mit diesem Code auf:

<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 verschiedene Methoden, wie versucht disabled-Attribut gesetzt mit .prop(), .attr() und .disabled=. Es passiert jedoch nichts. Bei der Anwendung auf einen anstelle von <select> funktioniert der Code einwandfrei.

Wie zum Deaktivieren/Aktivieren <select> mit jQuery?

Answer 1

Sie möchten Code verwenden, wie folgt aus:

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

Answer 2

Gute Frage - ich denke, der einzige Weg, dies zu erreichen, ist die Elemente in der Auswahl zu filtern.
Sie können dies über ein jquery-Plugin tun. Überprüfen Sie den folgenden Link, es beschreibt, wie Sie etwas erreichen können, das dem ähnlich ist, was Sie brauchen. Dank
jQuery disable SELECT options based on Radio selected (Need support for all browsers)

Answer 3

Verwenden Sie die folgenden Schritte aus:

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

Oder fügen Sie einfach id="pizza_kind"-<select> Tag, wie <select name="pizza_kind" id="pizza_kind">: jsfiddle link

Der Grund Code funktionierte nicht einfach ist, weil $("#pizza_kind") nicht ist Wählen Sie das <select> Element, weil es id="pizza_kind" nicht hat.

Edit: tatsächlich, eine bessere Selektor ist $("select[name='pizza_kind']"): jsfiddle link

Answer 4

zu können wählt deaktivieren/aktivieren allererst Ihre wählt eine ID oder Klasse benötigen. Dann könnten Sie so etwas tun:

Disable:

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

Enable:

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

Answer 5

Einfach nur verwenden:

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

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

DEMO

Answer 6

Ihre select arbeitet keine ID haben, nur ein Name.Sie müssen Ihre Wähler ändern:

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

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

Answer 7

leid in alten Thread zu beantworten, sondern kann mein Code andere in future.i hilft bei der gleichen Szenario war, dass, wenn das Kontrollkästchen aktiviert wird dann werden einige ausgewählte Eingabefelder deaktiviert.

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

Answer 8

Behinderte ist ein Boolean Attribute des select element wie WHATWG angegeben, das bedeutet, die RIGHT WAY mit jQuery zu DEAKTIVIEREN

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

wäre Dies würde

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

diesem HTML machen

Dies funktioniert für beide XHTML and HTML (W3School reference)

Doch es kann auch

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

bekommt

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

, mich als Eigentum gemacht werden, die für HTML funktioniert nur und nicht XTML

HINWEIS: Ein gesperrtes Element wird nicht mit dem Formular wie in dieser Frage beantwortet eingereicht: The disabled form element is not submitted

HINWEIS2: Ein deaktiviertes Element ist möglicherweise ausgegraut.

ANMERKUNG 3:

Eine Form, die Steuerung deaktiviert wird, muss jeder Klick Ereignisse verhindern, die auf die Benutzer-Interaktion Aufgabe Quelle Warteschlange von auf das Element geschickt wird.

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>