jquery JavaScript中的check和uncheck复选框,uncheck复选框后返回原始状态

e3bfsja2  于 2023-04-29  发布在  jQuery
关注(0)|答案(3)|浏览(124)

我使用JavaScript代码的功能,如果复选框被选中禁用选择下拉菜单,然后如果取消选中复选框,并启用选择下拉菜单。
HTML:

<input type="checkbox" id="flag">

  <select name="cars" id="select" disabled>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </select>

我是这么做的

function summary()
  {
    if (document.getElementById('flag').checked) 
    {
      document.getElementById('select').disabled = true;
    }
    else{
    document.getElementById('select').disabled = false;
    }
  }

我的问题是,除了重复重复代码document.getElementById('select').disabled =,有没有更短的方法来实现这个逻辑?

rjee0c15

rjee0c151#

当然,您可以通过将一个布尔值设置为另一个布尔值来缩短您的JS。

function summary() {
  document.getElementById('select').disabled = document.getElementById('flag').checked;
}
hlswsv35

hlswsv352#

我会这样写,因为“checked”是一个布尔值:

function summary() {
  document.getElementById('select').disabled = document.getElementById('flag').checked;
}

document.getElementById("flag").addEventListener("click",summary);
<input type="checkbox" id="flag">

<select name="cars" id="select" disabled>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>
mqkwyuun

mqkwyuun3#

当复选框被选中时,选择菜单将被激活,当复选框未被选中时,选择菜单将处于非活动状态

let flag = document.getElementById('flag');

flag.addEventListener('click', () => {
    document.getElementById('select').disabled = !flag.checked;
});
<input type="checkbox" id="flag">

<select name="cars" id="select" disabled="true">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
</select>

选中复选框时,选择菜单将不激活,而未选中复选框时,选择菜单将处于活动状态

let flag = document.getElementById('flag');

flag.addEventListener('click', () => {
    document.getElementById('select').disabled = flag.checked;
});
<input type="checkbox" id="flag">

<select name="cars" id="select">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
</select>

相关问题