jQuery ausgewählt Dropdown-Menü deaktiviert, wenn Kontrollkästchen aktiviert ist

Question

Ich bin wirklich neu in jQuery und ich habe Schwierigkeiten herauszufinden, wie man eine Dropdown-Liste nach ID deaktivieren, wenn ein Kontrollkästchen aktiviert ist.

Die Logik würde so aussehen.

1) Wenn eine Checkbox aktiviert ist (aktiviert), dann deaktiviert Dropdown 2) Wenn eine Checkbox deaktiviert ist (nicht markiert), dann den Abfall ermöglicht unten

Das Ankreuzfeld ID ist zum Beispiel Trivial_Order und die Dropdown-ID ist manager_search

var select = $('select'); 
 
select.chosen(); 
 
select.on('chosen:updated', function() { 
 
    if (select.attr('readonly')) { 
 
     var wasDisabled = select.is(':disabled'); 
 

 
     select.attr('disabled', 'disabled'); 
 
     select.data('chosen').search_field_disabled(); 
 

 
     if (wasDisabled) { 
 
      select.attr('disabled', 'disabled'); 
 
     } else { 
 
      select.removeAttr('disabled'); 
 
     } 
 
    } 
 
}); 
 
select.trigger('chosen:updated');

select { 
 
    width: 300px; 
 
}

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css"/> 
 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.proto.min.js"></script> 
 

 
<select readonly="readonly"> 
 
    <option>option</option> 
 
</select>

ich kann einfach nicht herausfinden, wie diese Checkbox Logik in diesem Code zu implementieren.

Die jQuery-Plugin, das ich bin mit 1.7.0 gewählt wird helfen jemand

Könnte bitte?

UPDATE: Ich verstehe nicht, was ich falsch mache. Es funktioniert nicht

<script> 

     var myselect = $('select'); 
     myselect.chosen(); 
     $('chosen-change').change(function() { 
      myselect.prop('disabled', $(this).is(':checked')); 
      myselect.trigger("chosen:updated"); 
     }); 

    </script> 


<td>Checkbox:</td> 
<td> 
<asp:CheckBox ID="Trivial_Order" runat="server" 
oncheckedchanged="Trivial_Order_CheckedChanged" AutoPostBack="True" /> 



<asp:dropdownlist onkeypress="KeyPress(this.selectedIndex, this.name);return false;" id="ISS_manager" 
    class="chosen-select" 
    onChange="pressing='';" size="4" Runat="server"> 
</asp:dropdownlist> 

Answer 1

Es ist notwendig, das chosen:updated Ereignis auszulösen, wenn Checkbox geändert wird. Einzelheiten siehe Abschnitt Observing, Updating, and Destroying Chosen. Versuchen Sie, Code Snipeet unten auszuführen.

var myselect=$('select'); 
 
myselect.chosen(); 
 
$('input').change(function() { 
 
    myselect.prop('disabled', $(this).is(':checked')); 
 
    myselect.trigger("chosen:updated"); 
 
});

select { 
 
    width: 300px; 
 
}

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.proto.min.js"></script> 
 

 
<input type="checkbox" /> 
 
<select> 
 
    <option>option 1</option> 
 
    <option>option 2</option> 
 
    <option>option 3</option> 
 
</select>

Hinweis.

1. Sie verwenden AutoPostBack="True" auf der <asp:CheckBox> Kontrolle. Daher wird eine Anfrage automatisch an den Server gesendet, wenn das Kontrollkästchen aktiviert ist. Als Ergebnis wird der Browser eine neue Seite vom Server empfangen. Daher wird der erstellte JavaScript-Handler nicht beendet.
2. Sie versuchen, JavaScript auszuführen, wenn gewünschte Objekte nicht in DOM erstellt wurden.
3. Es gibt kein chosen-change Element.

die Kollisionen zu vermeiden:

1. Sie auf der <asp:CheckBox> Steuerung verwenden Post zurück nicht automatisch.
2. Das <script> Element muss unter Ihre Chechbox sein und Elemente auswählen.
3. Change Event Handler muss Anhang der Checkbox-Eingabe sein.