巧妙使用ID值，轻松禁用开关，揭秘实用技巧！

2023-12-18 20:03:08

巧用开关控件：化解先改后传的棘手问题

在编程世界中，开关控件是日常任务中的常见元素，其功能在于允许用户在两种状态之间进行切换。然而，令人头疼的是，当开关处于开启状态时，其 ID 值却诡异地变成了“a”，而关闭状态下的 ID 值却变成了“b”。这种令人困惑的“先改后传”特性给判断开关是否应该被禁用的开发者带来了不小的挑战。

为何无法直接用 ID 值来禁用开关？

理解这一问题的关键在于开关控件的事件处理机制。当点击开关控件时，其状态会发生改变，然后才会触发 change 事件。这意味着，当 change 事件被触发时，传递给事件处理函数的 ID 值实际上是关闭状态下的“b”值，而不是我们预期的开启状态“a”值。因此，如果开关处于开启状态，根据 ID 值来判断是否禁用开关显然无法达到预期效果。

通过其他字段判断开关状态

既然直接使用 ID 值不可行，那么我们便需要寻找其他途径来判断开关的状态，从而实现根据状态禁用开关的目的。

1. 使用额外的标志位

一种方法是使用额外的标志位来明确标记开关的状态。例如，我们可以使用一个额外的 <span> 元素来显示开关的状态，并根据开关的状态动态更新其内容。

<div id="switch">
  <input type="checkbox" id="checkbox">
  <span id="status">a</span>
</div>

const switchElement = document.getElementById('switch');
const checkboxElement = document.getElementById('checkbox');
const statusElement = document.getElementById('status');

checkboxElement.addEventListener('change', () => {
  if (checkboxElement.checked) {
    statusElement.textContent = 'a';
  } else {
    statusElement.textContent = 'b';
  }
});

switchElement.addEventListener('click', () => {
  if (statusElement.textContent === 'a') {
    // 禁用开关
    checkboxElement.setAttribute('disabled', true);
  } else {
    // 启用开关
    checkboxElement.removeAttribute('disabled');
  }
});

2. 根据开关父元素判断

另一种方法是根据开关的父元素来判断其状态。例如，我们可以使用一个额外的 <div> 元素作为开关的父元素，并根据开关的状态动态更新其类名。

<div id="parent">
  <div id="switch">
    <input type="checkbox" id="checkbox">
    <span id="status">a</span>
  </div>
</div>

const parentElement = document.getElementById('parent');
const switchElement = document.getElementById('switch');
const checkboxElement = document.getElementById('checkbox');
const statusElement = document.getElementById('status');

checkboxElement.addEventListener('change', () => {
  if (checkboxElement.checked) {
    statusElement.textContent = 'a';
  } else {
    statusElement.textContent = 'b';
  }
});

parentElement.addEventListener('click', () => {
  if (statusElement.textContent === 'a') {
    // 禁用开关
    checkboxElement.setAttribute('disabled', true);
  } else {
    // 启用开关
    checkboxElement.removeAttribute('disabled');
  }
});