📌  相关文章
📜  在选择中禁用除所选之外的其他选项 - Javascript (1)

📅  最后修改于: 2023-12-03 15:37:47.259000             🧑  作者: Mango

在选择中禁用除所选之外的其他选项 - JavaScript

当我们需要在一个多选框或者下拉菜单中实现选择某一项后禁用其他的选项时,可以使用 JavaScript 来实现。

首先,我们需要获取到所有的选项。如果是多选框,可以通过 document.querySelectorAll('[type=checkbox]') 获取到所有的多选框元素;如果是下拉菜单,可以通过 document.querySelectorAll('select option') 获取到所有的选项元素。接着,我们需要为每个选项添加事件监听器,在选中某个选项时,禁用其他选项。

代码示例(多选框):

const checkboxes = document.querySelectorAll('[type=checkbox]');

checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', () => {
    if (checkbox.checked) {
      checkboxes.forEach(otherCheckbox => {
        if (otherCheckbox !== checkbox) {
          otherCheckbox.disabled = true;
        }
      });
    } else {
      checkboxes.forEach(otherCheckbox => {
        if (otherCheckbox !== checkbox) {
          otherCheckbox.disabled = false;
        }
      });
    }
  });
});

上述代码中,我们使用了 forEach 方法遍历每个多选框,并为每个多选框添加了一个 change 事件监听器,在选中某个多选框时,禁用其他多选框。

代码示例(下拉菜单):

const options = document.querySelectorAll('select option');

options.forEach(option => {
  option.addEventListener('click', () => {
    const selectedOption = document.querySelector('select option:checked');

    options.forEach(otherOption => {
      if (otherOption !== selectedOption) {
        otherOption.disabled = true;
      }
    });
  });
});

上述代码中,我们使用了 forEach 方法遍历每个选项,并为每个选项添加了一个 click 事件监听器,在选择某个选项时,禁用其他选项。

以上就是在选择中禁用除所选之外的其他选项的 JavaScript 实现方法。可以根据实际需求选择使用多选框或者下拉菜单,代码适用性较广,希望对大家有所帮助。