CODEWITHSUNDEEP
jqueryhtmllaravel
naning14
naning14

Reputation: 39

Enable dropdown when checkbox is checked

I want to enable and disable a dropdown list using a checkbox.And i have dropdown for every checkbox. The dropdown is enabling everytime i checked a checbox, but the problem is all dropdown is being enabled.

HERE IS MY 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

And here is my 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>

Upvotes: 2

Views: 2934

Answers (3)

brahimfes
brahimfes

Reputation: 112

This line :$select = $('.tol'); returns all your dropdown fields, that why all your dropdown are visible.

I think you should change your html structure first like this :

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

And then you can identify the ".tol" correctly :

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

Upvotes: 2

Matthias S
Matthias S

Reputation: 3563

You shouldn't create multiple html id attributes with the same value. Instead, make sure that every select box has an ID that is unique by adding the allergen_id to it.

That way you can easily reference it within your jQuery and manipulate it. It gives you more freedom in your HTML creation afterwards (the previous answer requires you to have your Checkbox Element directly follow the Select statement).

Your HTML could change like this:

@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

And then your jQuery would change to:

$(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');
        }
    });
});

As you can see, the ID of every select changed from tol to tol_{{id}}. Since the value of each checkbox has this ID stored, you can use the ID of the checkbox that is checked to reference the correct select statement.

Upvotes: 0

Taplar
Taplar

Reputation: 24965

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

Upvotes: 3

Related Questions