Question

我是Laravel Framework的新手，也是jquery的新手。

我正面临一个问题。我希望默认情况下所有选择框都被禁用。只有当点击Checkbox时它才会激活，即当用户点击皮肤护理复选框时，它的相应选择框将被激活，当用户点击Hair复选框时，它的相应选择框将被激活。我的html代码如下： -

enter code here
<div class="div_img_part-2"> 
    <span class="img_part_class-2"><img src="img/skin-care-bbeauty-tip1.png"></span>
    <span class="text_part_class-2">
    <span class="check-box">
        <input type="checkbox" name="name"/>Skin Care</span>
    </span>
    <select class="selectpicker" >
        <option>Salon</option>
        <option>Mobile beautician</option>      
        <option>Both</option>
    </select>
 </div>

注意： - 上面的代码我将通过Foreach循环实现。所以请根据Foreach提供jquery代码

Answer 1

希望这会对你有所帮助，

根据您的HTML，

 $('select').attr('disabled', true); //By default all the select box will be disabled
 $('input[type="checkbox"]').on('click', function(){

     if($(this).prop('checked') == true){
         $(this).parents().parents().find('select').attr('disabled', false);
     }else{
         $(this).parents().parents().find('select').attr('disabled', true);
     }
 });

Jquery的，

UIWebView

Answer 2

试试这个jQuery代码。如果您使用 bootstrap selectpicker ，请使用$('.selectpicker').selectpicker('refresh');进行刷新选择选项卡，以便禁用 attrinute生效，否则从代码中删除该行。查看我的fiddle here

$(document).ready(function () {
            $(".div_img_part-2 .selectpicker").attr("disabled",true);
            $('.selectpicker').selectpicker('refresh');
                $(".check-box input[type='checkbox']").on("change", function () {
                    if ($(this).prop("checked")) {
                        $(this).parents(".div_img_part-2").find(".selectpicker").removeAttr("disabled");
                        $('.selectpicker').selectpicker('refresh');
                    }else{
                        $(this).parents(".div_img_part-2").find(".selectpicker").attr("disabled",true);
                        $('.selectpicker').selectpicker('refresh');
                    }
                });
        });

Answer 3

试试这个

$(document).ready(function(){
  
$(':checkbox').change(function() {
  
  if($(this).is(':checked')){
         $(this).parents().parents().find('select').attr('disabled', false);
     }else{
         $(this).parents().parents().find('select').attr('disabled', true);
     }
  
}); 

  
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div_img_part-2"> 
    <span class="img_part_class-2"><img src="img/skin-care-bbeauty-tip1.png"></span>
    <span class="text_part_class-2">
    <span class="check-box">
        <input type="checkbox" class="skin" name="name"/>Skin Care</span>
    </span>
    <select id="skin" name="skin" class="selectpicker" disabled >
        <option>Salon</option>
        <option>Mobile beautician</option>      
        <option>Both</option>
    </select>
 </div>

如何激活下拉单击复选框

3 个答案: