2017-11-07 16 views
0

Ich möchte eine Dropdown-Liste mit einem Kontrollkästchen aktivieren und deaktivieren. Und ich habe Drop-Down für jedes Kontrollkästchen. Das Dropdown-Menü wird immer aktiviert, wenn ich eine Checkbox ankreuze, aber das Problem ist, dass alle Dropdown-Funktionen aktiviert sind.Aktivieren Dropdown, wenn das Kontrollkästchen aktiviert ist

HIER IST MEIN HTML

@foreach($allergies as $aller) 
       <select name="tolerance[]" class="tol" id="tol" disabled> 
         <option value="Low">Low</option> 
         <option value="Medium">Medium</option> 
         <option value="High">High</option> 
       </select> 
         <input type="checkbox" class="allergies" id="allergies" name="allergen[]" value="{{$aller->allergen_id}}"> 
         {{ $aller->allergen_name}}<br> 
       @endforeach 

Und hier ist mein JQUERY

<script> 
    $(document).ready(function(){ 
    $('.tol').attr('disabled', 'disabled'); 
    }); 

    $(document).ready(function(){ 

     var $checkBox = $('.allergies'), 
     $select = $('.tol'); 

    $checkBox.on('change',function(e){ 
     if ($(this).is(':checked')){ 
      $select.removeAttr('disabled'); 
     }else{ 
      $select.attr('disabled','disabled'); 
     } 
    }); 

    }); 
</script> 
+0

Ja, ist es. Das ist mein Problem. Wie sollte ich es an sein Übereinstimmungsfeld ankreuzen? Es tut mir leid, aber was meinst du mit next() Element zu ändern? – naning14

Antwort

1

$(document).ready(function() { 
 
    $('.tol').attr('disabled', 'disabled'); 
 

 
    var $checkBox = $('.allergies'); 
 

 
    $checkBox.on('change', function(e) { 
 
    //get the previous element to us, which is the select 
 
    var $select = $(this).prev(); 
 
    
 
    if (this.checked) { 
 
     $select.removeAttr('disabled'); 
 
    } else { 
 
     $select.attr('disabled', 'disabled'); 
 
    } 
 
    }); 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="tolerance[]" class="tol" disabled> 
 
         <option value="Low">Low</option> 
 
         <option value="Medium">Medium</option> 
 
         <option value="High">High</option> 
 
       </select> 
 
<input type="checkbox" class="allergies" id="allergies" name="allergen[]" value="Pollen">Pollen<br> 
 

 
<select name="tolerance[]" class="tol" disabled> 
 
         <option value="Low">Low</option> 
 
         <option value="Medium">Medium</option> 
 
         <option value="High">High</option> 
 
       </select> 
 
<input type="checkbox" class="allergies" id="allergies" name="allergen[]" value="Glue">Glue<br>

+0

Vielen Dank !!!! Es funktioniert wie Magie – naning14

2

Diese Zeile: $select = $('.tol'); kehrt alle Drop-Down-Felder, das, warum alle Ihre Dropdown sind sichtbar.

Ich glaube, Sie Ihre HTML-Struktur zuerst wie folgt ändern sollte:

<div class="field"> 
<select name="tolerance[]" class="tol" id="tol" disabled> 
    <option value="Low">Low</option> 
    <option value="Medium">Medium</option> 
    <option value="High">High</option> 
</select> 
<input type="checkbox" class="allergies" id="allergies" name="allergen[]" value="{{$aller->allergen_id}}"> 
<div> 

Und dann kann man die ".TOL" korrekt identifizieren:

$checkBox.on('change',function(e){ 
    var tol = this.parent('.field').find('.tol'); 
    if ($(this).is(':checked')){ 
     tol.removeAttr('disabled'); 
    }else{ 
     tol.attr('disabled','disabled'); 
    } 
}); 
+0

Es funktioniert nicht, es ermöglicht alle Dropdown. Vielen Dank – naning14

0

Sie sollten nicht mehrere html erstellen id Attribute mit dem gleichen Wert. Stellen Sie stattdessen sicher, dass jedes Auswahlfeld über eine eindeutige ID verfügt, indem Sie ihm die Allergen-ID hinzufügen.

Auf diese Weise können Sie es leicht in Ihrem jQuery verweisen und es manipulieren. Es gibt Ihnen später mehr Freiheit bei der HTML-Erstellung (die vorherige Antwort erfordert, dass Ihr Checkbox-Element direkt der Select-Anweisung folgt).

Ihre HTML könnte wie folgt ändern:

@foreach($allergies as $aller) 
    <select name="tolerance[]" class="tol" id="tol_{{$aller->allergen_id}}" disabled="disabled"> 
     <option value="Low">Low</option> 
     <option value="Medium">Medium</option> 
     <option value="High">High</option> 
    </select> 
    <input type="checkbox" class="allergies" id="allergies_{{$aller->allergen_id}}" name="allergen[]" value="{{$aller->allergen_id}}"> 
    {{ $aller->allergen_name}} 
    <br> 
@endforeach 

Und dann jQuery ändern würde: kann

$(document).ready(function(){ 
    $('.tol').attr('disabled', 'disabled'); 

    var $checkBox = $('.allergies'); 

    $checkBox.on('change',function(e){ 
     if ($(this).is(':checked')){ 
      $("#tol_" + $(this).attr("value")).removeAttr('disabled'); 
     }else{ 
      $("#tol_" + $(this).attr("value")).attr('disabled','disabled'); 
     } 
    }); 
}); 

Wie Sie sehen, die ID eines jeden select von tol zu tol_{{id}} geändert. Da der Wert jedes Kontrollkästchens diese ID gespeichert hat, können Sie die ID des aktivierten Kontrollkästchens verwenden, um auf die richtige SELECT-Anweisung zu verweisen.

Verwandte Themen