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

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>