禁用的格式在每个复选框中都在跳转发生了什么事？

问题描述

我正在编写一个带有各种选项的表格，这些选项带有时隙，用户可以在其中选择适合自己的窗口。当他们选择与另一个选项共享相同时间范围的选项时，其他选项应该被禁用，直到用户取消选择他们单击的选项为止。这样，他们就不能选择时间冲突的两个选项。

我遇到的问题是：

1. 当用户取消选择所单击的复选框时，这些选项不会重新启用。
2. 当用户选择其他复选框时，禁用的格式会跳到其他选项。

什么可能导致这种情况发生？

const activityCheckboxes = document.querySelectorAll('.activities input');
const activityLabels = document.querySelectorAll('.activities label')

document.querySelector('.activities').addEventListener('change',(e) => {
    const clicked = e.target;
    const clickedTime = clicked.getAttribute('time');

    for (let i = 0; i < activityCheckboxes.length; i++) {
        const activityTime = activityCheckboxes[i].getAttribute('time');
        if (clickedTime === activityTime && clicked !== activityCheckboxes[i]) {
            activityCheckboxes[i].setAttribute('disabled',true);
            activityLabels[i].style.color = "gray";
            activityLabels[i].style.setProperty("text-decoration","line-through");
        } else {
            activityCheckboxes[i].removeAttribute('disabled');
            activityLabels[i].style.setProperty("color","initial");
            activityLabels[i].style.setProperty("text-decoration","initial");
        }
    }


});

<fieldset class="activities">
        <legend>Different Time Options</legend>
          <label><input type="checkbox" time="3pm"> Option 1  - 3pm </label>
          <br />
          <label><input type="checkbox" time="1pm"> Option 2 - 1pm </label>
          <br />
          <label><input type="checkbox" time="4pm"> Option 3 - 4pm </label>
          <br />
          <label><input type="checkbox" time="1pm"> Option 4 - 1pm </label>
          <br />
          <label><input type="checkbox" time="3pm"> Option 5 - 3pm </label>   
          <br />
          <label><input type="checkbox" time="3pm"> Option 6 - 3pm </label>
          <br />
          <label><input type="checkbox" time="4pm"> Option 7 - 4pm </label>
                    
      </fieldset>

解决方法

1. 您不会检查输入是否被选中，因此在两种情况下都只会执行一个操作。

2. 您只需检查触发事件的一个输入，以便其他输入的所有样式/禁用都将丢失

下面的代码段清除了所有项目，然后检查应禁用哪些项目并将其禁用

const activityCheckboxes = document.querySelectorAll('.activities input');
const activityLabels = document.querySelectorAll('.activities label')

document.querySelector('.activities').addEventListener('change',(e) => {
    const clicked = document.querySelectorAll('.activities input:checked');
    let selector = 'xxx ';
    for (let i = 0; i < clicked.length; i++) {
        selector += ',.activities [time="'+clicked[i].getAttribute('time')+'"]:not(:checked)';
    }
    const clickedTime = document.querySelectorAll(selector);
    for (let i = 0; i < activityCheckboxes.length; i++) {
            activityCheckboxes[i].removeAttribute('disabled');
            activityLabels[i].style.setProperty("color","initial");
            activityLabels[i].style.setProperty("text-decoration","initial");
    }
    for (let i = 0; i < clickedTime.length; i++) {
            clickedTime[i].setAttribute('disabled',true);
            clickedTime[i].style.color = "gray";
            clickedTime[i].parentElement.style.setProperty("text-decoration","line-through");
    }


});

<fieldset class="activities">
        <legend>Different Time Options</legend>
          <label><input type="checkbox" time="3pm"> Option 1  - 3pm </label>
          <br />
          <label><input type="checkbox" time="1pm"> Option 2 - 1pm </label>
          <br />
          <label><input type="checkbox" time="4pm"> Option 3 - 4pm </label>
          <br />
          <label><input type="checkbox" time="1pm"> Option 4 - 1pm </label>
          <br />
          <label><input type="checkbox" time="3pm"> Option 5 - 3pm </label>   
          <br />
          <label><input type="checkbox" time="3pm"> Option 6 - 3pm </label>
          <br />
          <label><input type="checkbox" time="4pm"> Option 7 - 4pm </label>
                    
      </fieldset>