如何在複選框上單擊主動下拉菜單

-1

我是Laravel Framework中的新成員，jquery中的新成員。如何在複選框上單擊主動下拉菜單

我正面臨一個問題。我想在默認情況下所有的選擇框都被禁用。只有當點擊複選框時，它纔會被激活，即當用戶點擊皮膚護理複選框時，其相應的選擇框將被激活，並且當用戶點擊頭髮複選框時，其對應的選擇框將被激活。下面我的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

來源

2016-10-06 kunal

https://jsfiddle.net/rayon_1990/p4h9bva6/ – Rayon

親愛的人造絲。它看起來像靜態我會更有趣動態部分 – kunal

親愛的庫納爾，我們如何評估你的代碼中的動態元素？你分享了多少代碼？當你說_dynamic_時，你是什麼意思？你是否試圖根據'DOM'中存在的模式獲取'select'元素？ – Rayon

試試這個jQuery代碼。如果您使用的是bootstrap selectpicker，則使用$('.selectpicker').selectpicker('refresh');進行刷新selectpicker，以使的作用禁用 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'); 
        } 
       }); 
     });

來源

2016-10-06 05:30:39

謝謝。像魅力工作 – kunal

Rakesh。當我回到上面的那個頁面時，我面對着更多的問題，我在會話中存儲了數據。顯示我的複選框顯示已選中，但是我的下拉列表已停用。我也希望那個複選框被選中對應的選擇框也被激活。你能幫忙嗎？ – kunal

希望這會幫助你，

根據你的HTML我提供jQuery代碼，

<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); 
    } 
});

來源

2016-10-06 05:25:27 Samir

試試這個

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

來源

2016-10-06 05:35:08 JYoThI

如何在複選框上單擊主動下拉菜單

回答

相關問題