Aktivieren / Deaktivieren einer Dropdown-Box in jquery

73

Ich bin neu in jQuery und möchte eine Dropdown-Liste mithilfe eines Kontrollkästchens aktivieren und deaktivieren. Das ist mein HTML:

<select id="dropdown" style="width:200px">
    <option value="feedback" name="aft_qst">After Quest</option>
    <option value="feedback" name="aft_exm">After Exam</option>
</select>
<input type="checkbox" id="chkdwn2" value="feedback" />

Welchen jQuery-Code brauche ich dazu? Suchen Sie auch nach einer guten jQuery-Dokumentation / einem guten Lernmaterial.

jquery drop-down-menu

— ARUN PS
quelle

169

Hier ist ein Weg, von dem ich hoffe, dass er leicht zu verstehen ist:

http://jsfiddle.net/tft4t/

$(document).ready(function() {
 $("#chkdwn2").click(function() {
   if ($(this).is(":checked")) {
      $("#dropdown").prop("disabled", true);
   } else {
      $("#dropdown").prop("disabled", false);  
   }
 });
});

— Kris Krause
quelle

7

Hinweis: jQuery 1.6.x verwendet .prop, während frühere Versionen .attr

— Kris Krause

$("#chkdwn2").change(function() { $("#dropdown").prop('disabled', !this.checked); }) jsfiddle.net/tft4t/74

— Fabrício Matté

11

Versuchen -

$('#chkdwn2').change(function(){
    if($(this).is(':checked'))
        $('#dropdown').removeAttr('disabled');
    else
        $('#dropdown').attr("disabled","disabled");
})

— Jayendra
quelle

9

Ich benutze JQuery> 1.8 und das funktioniert bei mir ...

$('#dropDownId').attr('disabled', true);

— Chris Rosete
quelle

Dies sollte die akzeptierte Antwort sein (Anfang 2019), da jede Schleife usw. Auswirkungen auf die Leistung hat und die Verwendung der attr-Methode die performanteste Methode ist.

— SeaWarrior404

2

Aktivieren / Deaktivieren -

$("#chkdwn2").change(function() { 
    if (this.checked) $("#dropdown").prop("disabled",true);
    else $("#dropdown").prop("disabled",false);
})

Demo - http://jsfiddle.net/tTX6E/

— ipr101
quelle

1

$("#chkdwn2").change(function(){
       $("#dropdown").slideToggle();
});

JsFiddle

— Genesis
quelle

Ich gebe dir einen Daumen hoch, nur weil das ziemlich cool ist ... und ich wusste nichts über diese Funktion.

— AxleWack

1

Versuche dies

 <script type="text/javascript">
        $(document).ready(function () {
            $("#chkdwn2").click(function () {
                if (this.checked)
                    $('#dropdown').attr('disabled', 'disabled');
                else
                    $('#dropdown').removeAttr('disabled');
            });
        });
    </script>

— Santosh Singh
quelle

1

Eine bessere Lösung ohne if-else:

$(document).ready(function() {
    $("#chkdwn2").click(function() {
        $("#dropdown").prop("disabled", this.checked);  
    });
});

— Muhammad Ahmad
quelle

0

$("#chkdwn2").change(function() { 
    if (this.checked) $("#dropdown").prop("disabled",'disabled');
})

— Baqer Naqvi
quelle

0

$(document).ready(function() {
 $('#chkdwn2').click(function() {
   if ($('#chkdwn2').prop('checked')) {
      $('#dropdown').prop('disabled', true);
   } else {
      $('#dropdown').prop('disabled', false);  
   }
 });
});

Verwendung .propin der ifErklärung.

— RossGamble
quelle

0

Dies dient zum Deaktivieren von Dropdown2 und Dropdown3, wenn Sie die Option aus Dropdown1 mit dem Wert 15 auswählen

$("#dropdown1").change(function(){
            if ( $(this).val()!= "15" ) {
                $("#dropdown2").attr("disabled",true);
                $("#dropdown13").attr("disabled",true);

            }

— mohammad
quelle