jQuery MultiSelect 无法启用禁用答案

【问题标题】：jQuery MultiSelect can not enable a disabledjQuery MultiSelect 无法启用禁用
【发布时间】：2017-09-12 07:23:37
【问题描述】：

我有几个下拉菜单，其中只有一个从一开始就启用，其他所有都禁用 <select class="someClass" name="someName" multiple id="someId" disabled>

禁用下拉菜单的启用取决于第一个（启用）下拉菜单中值的选择，因此我使用以下代码

$('#enabledDropDown').on('change',function() { }

在那里（在进一步的 if 语句中）我尝试了以下所有可能的组合：

$('#someId').multiselect('enable');
$('#someId').multiselect('refresh');
$('#someId option').attr('disabled',false);
$('#someId').prop('disabled', false);
$('#someId').material_select();
$('#someId').removeAttr('disabled');

但它只是不起作用。下拉菜单仍处于禁用状态！

编辑： 我有一个$(document).ready(function () { } 执行以下操作...

$('#someId').multiselect({
    name : 'someName',
    columns : someNumber,
    placeholder : 'somePlaceholder'

 });

这似乎是我的问题的原因，因为如果我在 document.ready 函数中删除相应的代码块，则下拉菜单的行为符合预期。问题是我需要那个 document.ready 函数。

我真的不明白为什么会发生这种交互，因为 document.ready 仅在侧面加载时执行一次。但启用是在那之后发生的。

【问题讨论】：

试试$('#someId').attr('disabled', false);
那些multiselect material_select 来自哪里？一些插件？如果是这样，文档可能会有一些关于它的信息
你试过$("#someId").slideToggle();
如果可能的话，创建一个 sn-p 或 fiddler。
如果它的倍数那么它应该是

标签： javascript jquery multi-select

【解决方案1】：

再次检查您的状况。 prop('disable',false) 应该可以，请查看下面的 sn-p 以供参考。

$(document).ready(function() {
    $("#checkMe").click(function() {
       if ($(this).is(":checked")) { 
          $("#dropdown").prop("disabled", true);
       } else {
          $("#dropdown").prop("disabled", false);  
       }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown" style="width:200px;">
              <option value="feedback">Options</option>
              <option value="feedback">Options</option>
              </select>

              <input type="checkbox" id="checkMe" value="feedback"/>Check me!

【讨论】：

条件很好，原因在编辑部分描述，谢谢！

【解决方案2】：

你可以试试

document.getElementById("someId").disabled=false;

并在第一个下拉菜单上添加一个 onclick 函数并检查其值，然后启用/禁用下拉菜单。

function check(){
  if(document.getElementById('enabledDropDown').value == 'someId')
    document.getElementById('someId').disabled=false;
  else
    document.getElementById('someId').disabled=true;
}

<!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>

    <form>
    <text>Select someId to enable dropdown</text><br>
    
    <select class="someClass" name="someName" id="enabledDropDown" onchange="check()">
      <option>Banana</option>
      <option>Orange</option>
      <option>someId</option>
      <option>Pear</option>
      <option>Banana</option>
      <option>Orange</option>
    </select>

    <select class="someClass" name="someName" id="someId" disabled>
      <option>Apple</option>
      <option>Pear</option>
      <option>Banana</option>
      <option>Orange</option>
    </select>
    
    
    <br><br>

    </body>
    </html>

【讨论】：

【解决方案3】：

你必须使用 $(".someClass").prop("disabled", false);这是工作。示例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">

    function check() {
        $(".someClass").prop("disabled", false);
    }

</script>
<form>
   <select class="someClass" name="someName" id="enabledDropDown" onchange="check()">
        <option>Data1</option>
        <option>Data2</option>
 </select>
    <br>
    <select class="someClass" name="someName" multiple id="someId" disabled>
        <option>Data3</option>
        <option>Data4</option>
        <option>Data5</option>
        <option>Data6</option>
        <option>Data7</option>
        <option>Data8</option>
    </select>
    <br>
    <select class="someClass" name="someName" multiple id="someId2" disabled>
        <option>Data9</option>
        <option>Data10</option>
        <option>Data11</option>
        <option>Data12</option>
        <option>Data13</option>
        <option>Data14</option>
    </select>
</form>

【讨论】：