如何在单选按钮选择上启用多选下拉菜单

Question

我有一个多选下拉菜单和两个单选按钮。 默认情况下， No应该被选中并且下拉菜单应该被禁用。 在更改为Yes它应该被启用，但它不起作用。 我不确定我在这里做错了什么。

这是我的 html：

<div class="form-group">
                        <label>Action Taken:</label>
                        <input type="radio" class="check" name="check" value="Yes">Yes
                        <input type="radio" class="check" name="check" value="No" checked>No
                        <select name="action[]" id="action" multiple class="action form-control" disabled>
                        <option value="Offcycle Salary Revision">Offcycle Salary Revision</option>
</select>

这是我的javascript：

<script>
$('.check').change(function(){

   let select = $(this).parents('.form-group:first').find('select') ; 

   if( $(this).val() == 'Yes')
        select.attr('disabled' , false );
   else 
        select.attr('disabled' , true );

});
</script>

这是我的多选javascript：

$('#action').multiselect({
  nonSelectedText: 'Select Action',
  buttonWidth:'465px',
  maxHeight:450,
  includeSelectAllOption: true
 });

有人可以告诉我我在这里做错了什么吗？ 它适用于单个选择下拉列表。

Answer 1

您需要定位由mutliselect动态创建的元素。 因此，您可以定位具有mutliselect类的按钮，然后更改该按钮的属性。

演示代码：

 $(document).ready(function() { $('#action').multiselect({ nonSelectedText: 'Select Action', buttonWidth: '465px', maxHeight: 450, includeSelectAllOption: true }); $('.check').change(function() { //targetting mutliselect button $(this).closest(".form-group").find(".multiselect").attr('disabled', $(this).val() == 'Yes' ? false : true); }); $('.check').trigger("change") //for triggering on page load.. })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script> <div class="form-group"> <label>Action Taken:</label> <input type="radio" class="check" name="check" value="Yes">Yes <input type="radio" class="check" name="check" value="No" checked>No <select name="action[]" id="action" multiple class="action form-control"> <option value="Offcycle Salary Revision">Offcycle Salary Revision</option> </select>