Question

我想使用复选框启用和禁用下拉列表。我有每个复选框的下拉列表。每次我检查一个checbox时都会启用下拉菜单，但问题是所有下拉菜单都已启用。

这是我的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

这是我的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>

Answer 1

这一行：$select = $('.tol');会返回您的所有下拉字段，这就是为什么您的所有下拉列表都可见。

我认为你应该首先改变你的html结构：

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

然后你可以识别＆＃34; .tol＆＃34;正确的：

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

Answer 2

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

Answer 3

您不应该使用相同的值创建多个html id属性。相反，通过向其添加过敏原，确保每个选择框都具有唯一的ID。

通过这种方式，您可以轻松地在jQuery中引用它并对其进行操作。之后，您可以更自由地创建HTML（之前的答案要求您让Checkbox元素直接跟随Select语句。）

您的HTML可能会改变如下：

@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

然后你的jQuery将改为：

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

如您所见，每个select的ID都从tol更改为tol_{{id}}。由于每个复选框的值都存储了此ID，因此您可以使用选中的复选框的ID来引用正确的select语句。

选中复选框后启用下拉列表

3 个答案: