反应选择禁用选项 - Javascript

有时候，我们希望在选择一个选项后，禁用其他选项。在Javascript中，我们可以通过添加事件监听器来实现这个功能。这里将会介绍两种方法。

方法1： 基于Select元素的onChange事件

我们可以通过Select元素的onChange事件来监听选择的变化，并在回调函数中设置其他选项的disabled属性为true。

const selectElement = document.getElementById("mySelect");

selectElement.addEventListener("change", (event) => {
  const selectValue = event.target.value;

  // 禁用所有其他选项
  Array.from(selectElement.options).forEach((option) => {
    if (option.value !== selectValue) {
      option.disabled = true;
    } else {
      option.disabled = false;
    }
  });
});

上面的代码片段首先获取select元素，然后在它上面添加一个事件监听器，监听它的变化。在回调函数中，我们首先获取选择的选项的值。然后，我们遍历所有的选项，将选择的选项的disabled属性设置为false，其余的选项的disabled属性设置为true。

方法2： 基于radio或checkbox元素的onClick事件

如果有多个radio或checkbox元素，并且想要在选择一个选项后禁用其他选项，那么我们可以借助它们的onClick事件来实现。

const radioButtonElements = document.getElementsByName("myRadioButtons");

radioButtonElements.forEach((radio) => {
  radio.addEventListener("click", (event) => {
    const selectedRadioValue = event.target.value;

    radioButtonElements.forEach((radio) => {
      if (radio.value !== selectedRadioValue) {
        radio.disabled = true;
      } else {
        radio.disabled = false;
      }
    });
  });
});

上面的代码片段首先获取所有radio元素，并在它们上面添加事件监听器。在回调函数中，我们首先获取选择的radio的值，然后遍历所有的radio元素，将选择的radio的disabled设置为false，其余的radio的disabled设置为true。

这两种方法都可以实现在选择一个选项后禁用其他选项的功能。选择哪一种方法取决于具体的场景和需求。