dsj8000
2016-10-06 05:13 浏览 409

如何激活下拉单击复选框[关闭]

I am new in Laravel Framework and new in jquery. enter image description here

i am facing one problem. i want by default all the selectboxes are disabled.It will be active only when click on Checkbox i.e. when user click on skin care checkbox its corresponding select box will active and when user click on Hair checkbox its corresponding select box will active. My html code as below:-

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>

Note:- The above code later on i will implement through Foreach loop. So please provide me jquery code according to Foreach

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

3条回答 默认 最新

  • 已采纳
    dq804806 dq804806 2016-10-06 05:30

    Try this jQuery code. If you are using bootstrap selectpicker then use $('.selectpicker').selectpicker('refresh'); for refresh selectpicker so that take effect of disabled attrinute otherwise remove that line from code. See my 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');
                        }
                    });
            });
    
    点赞 评论 复制链接分享
  • doupacan2098 doupacan2098 2016-10-06 05:25

    Hope this will help you,

    As per your HTML,

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

    Jquery,

     $('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);
         }
     });
    
    点赞 评论 复制链接分享
  • drktvjp713333 drktvjp713333 2016-10-06 05:35

    try this

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

    </div>
    
    点赞 评论 复制链接分享

相关推荐