使用 javascript 选择多个选项时如何启用禁用的输入？

Question

我运行遇到了问题。如果我在 select 标签中 select 编辑了多个项目并在删除 selection 时再次禁用它，我该如何启用禁用的输入？

<div class="form-group mb-3">
  <select class="selectpicker show-tick decore" name="state" id="state" multiple>
    <option value="one">one</option>
    <option value="two">two</option>
  </select>
</div>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">
      <i class="fas fa-child"></i>
    </span>
  </div>
  <input type="text" name="first" id="first" class="form-control" placeholder="first" aria-label="first" aria-describedby="basic-addon1" disabled />
</div>
<input type="text" name="second" id="second" class="form-control" placeholder="second" aria-label="second" aria-describedby="basic-addon1" disabled />
</div>

https://codepen.io/anon/pen/OrbQxm

Answer 1

为select标签使用change事件处理程序，并在函数中检查selected选项的长度是否小于2删除disabled属性和如果大于 2 将其添加到元素。

document.getElementById("state").onchange = function(){  
  var length = this.querySelectorAll("option:checked").length;
  document.querySelectorAll("#first, #second").forEach(function(ele){
    ele.disabled = length < 2;
  })
}

document.getElementById("state").onchange = function(){  
  var length = this.querySelectorAll("option:checked").length;
  document.querySelectorAll("#first, #second").forEach(function(ele){
    ele.disabled = length < 2;
  })
}

<div class="form-group mb-3">
  <select class="selectpicker show-tick decore" name="state" id="state" multiple>
    <option value="one">one</option>
    <option value="two">two</option>
  </select>
</div>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">
      <i class="fas fa-child"></i>
    </span>
  </div>
  <input type="text" name="first" id="first" class="form-control" placeholder="first" aria-label="first" aria-describedby="basic-addon1" disabled />
  <input type="text" name="second" id="second" class="form-control" placeholder="second" aria-label="second" aria-describedby="basic-addon1" disabled />
</div>

您也可以使用 jQuery 和更少的代码来完成这项工作

$("#state").change(function(){  
  $("#first, #second").prop("disabled", $(":selected",this).length < 2);
});

$("#state").change(function(){  
  $("#first, #second").prop("disabled", $(":selected",this).length < 2);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group mb-3">
  <select class="selectpicker show-tick decore" name="state" id="state" multiple>
    <option value="one">one</option>
    <option value="two">two</option>
  </select>
</div>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">
      <i class="fas fa-child"></i>
    </span>
  </div>
  <input type="text" name="first" id="first" class="form-control" placeholder="first" aria-label="first" aria-describedby="basic-addon1" disabled />
  <input type="text" name="second" id="second" class="form-control" placeholder="second" aria-label="second" aria-describedby="basic-addon1" disabled />
</div>

使用 javascript 选择多个选项时如何启用禁用的输入？

How to enable disabled inputs when multiple option is selected using javascript?

html

javascript

css

html-select