Question

我无法理解如何解决以下代码，因此无法使用“类名”而不是“名称”。

例如：当我单击“上午9点”时，我只希望禁用所有其他9AM元素。

感谢您的见解。

 <script>
    function ckChange(el) {
        var ckName = document.getElementsByTagName('input');

        for (var i = 0, c; c = ckName[i]; i++) {

            if (ckName[i].type == "checkbox" && el.className === "9AM") {
            
                
                c.disabled = !(!el.checked || c === el);
                
            }
             
        }
    }
</script>
<tr>
    <td><input class="9AM" data="9AM" type="checkbox" name="progress1" id="progress1" value="1" tabIndex="1" onClick="ckChange(this)">9AM</td>
</tr>
<tr>
    <td><input class="9AM" data="9AM" type="checkbox" name="progress1" id="progress2" value="1" tabIndex="1" onClick="ckChange(this)">9AM</td>
</tr>
<tr>
    <td><input class="10AM" data="10AM" type="checkbox" name="progress1" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)">10AM</td>
</tr>

<tr>
    <td><input class="10AM" data="10AM" type="checkbox" name="progress1" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)">10AM</td>
</tr>
<tr>
    <td><input class="11AM" data="11AM" type="checkbox" name="progress1" id="progress4" value="1" tabIndex="1" onClick="ckChange(this)">Test 4</td>
</tr>
<tr>
    <td><input class="11AM" data="11AM" type="text" name="progress1" id="progress4" tabIndex="1" onClick="ckChange(this)">Input</td>
</tr>

Answer 1

如果您要执行的操作是禁用具有相同className的任何其他元素，而不需要稍微更新if语句。当我认为要对与所有其他元素className一起检查的元素进行比较时，仅检查传递给函数的元素。

function ckChange(el) {
  var ckName = document.getElementsByTagName("input");

  for (var i = 0, c; (c = ckName[i]); i++) {
    console.log(el.className)
    if (ckName[i].type == "checkbox" && ckName[i].className === el.className) {
      c.disabled = !(!el.checked || c === el);
    }
  }
}

这是一个有效的代码笔：https://codepen.io/orunnals/pen/qBEabgq

Answer 2

您可以使用相同的类名称对元素进行分组，然后在选中复选框时禁用其组中的所有元素。这是一个示例：

const groupClasses = ['9AM', '10AM', '11AM'];
const groups = groupClasses.map((cls) => {
  const elms = document.getElementsByClassName(cls);
  return Array.from(elms);
});

groups.forEach((group) => {
  group.forEach((elm) => {
    elm.addEventListener('change', () => {
      group.filter(e => e !== elm).forEach((e) => {
        e.disabled = elm.checked;
      });
    });
  });
});

<tr>
  <td><input class="9AM" data="9AM" type="checkbox" name="" id="progress1" value="1" tabIndex="1">9AM</td>
</tr>
<tr>
  <td><input class="9AM" data="9AM" type="checkbox" name="" id="progress2" value="1" tabIndex="1">9AM</td>
</tr>
<tr>
  <td><input class="10AM" data="10AM" type="checkbox" name="" id="progress3" value="1" tabIndex="1">10AM</td>
</tr>

<tr>
  <td><input class="10AM" data="10AM" type="checkbox" name="" id="progress3" value="1" tabIndex="1">10AM</td>
</tr>
<tr>
  <td><input class="11AM" data="11AM" type="checkbox" name="" id="progress4" value="1" tabIndex="1">Test 4</td>
</tr>
<tr>
  <td><input class="11AM" data="11AM" type="text" name="" id="progress4" tabIndex="1">Input</td>
</tr>

Answer 3

与所有其他类一起检查当前元素类 ckName [i] .className === el.className

<script>
    function ckChange(el) {
        var ckName = document.getElementsByTagName('input');

        for (var i = 0, c; c = ckName[i]; i++) {
							//	console.log(ckName[i]);
            if (ckName[i].type == "checkbox" && ckName[i].className === el.className) {
            ckName[i].disabled = true;
                
                //c.disabled = !(!el.checked || c === el);
                
            }
             
        }
    }
</script>
<tr>
    <td><input class="9AM" data="9AM" type="checkbox" name="" id="progress1" value="1" tabIndex="1" onClick="ckChange(this)">9AM</td>
</tr>
<tr>
    <td><input class="9AM" data="9AM" type="checkbox" name="" id="progress2" value="1" tabIndex="1" onClick="ckChange(this)">9AM</td>
</tr>
<tr>
    <td><input class="10AM" data="10AM" type="checkbox" name="" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)">10AM</td>
</tr>

<tr>
    <td><input class="10AM" data="10AM" type="checkbox" name="" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)">10AM</td>
</tr>
<tr>
    <td><input class="11AM" data="11AM" type="checkbox" name="" id="progress4" value="1" tabIndex="1" onClick="ckChange(this)">Test 4</td>
</tr>
<tr>
    <td><input class="11AM" data="11AM" type="text" name="" id="progress4" tabIndex="1" onClick="ckChange(this)">Input</td>
</tr>

使用类“名称”代替“名称”

3 个答案: