Question

在这里，我正在使用Firebase一格显示所有驱动程序信息。我有6个div（即驱动程序引用中的6个对象），每个div都有一个启用/禁用选项的复选框。我想以这种方式操作复选框：如果单击第一格的复选框，它将仅在第一格中更改；如果单击第二格的复选框，它将仅在第二格中更改，依此类推，但是问题是当我单击时任何复选框只有第一个复选框已更改...我该如何克服...提前感谢

<script>
function contactHtmlFromObject(Key, Driver){
  console.log(Key,Driver);
    if(Driver.Gender=='Male'){
            html +='<input type="checkbox" id="disablecheckbox" onclick="loaddisable(\''+Key+'\')"><span id="toggle">Enabled</span>';
        }
        else{
            html +='<input type="checkbox" id="disablecheckbox" onclick="loaddisable(\''+Key+'\')" checked><span id="toggle">Disabled</span>';
        }
}


function loaddisable(Key) {
    var toggle= document.getElementById("toggle");
    var dcb= document.getElementById("disablecheckbox");
    var Refdis = firebase.database().ref("Driver/"+Key);      
    Refdis.on("value", function(snapshot) {
    if (dcb.checked == true){
      toggle.innerHTML="Disabled";
        }
    else {
      toggle.innerHTML="Enabled";
  }
});
}

Answer 1

正如评论中的好人所建议的那样，您的IDs不是唯一的。这就是 ID 的全部目的，对吧？：）

因此，您的 JS 函数会使用 id 查看第一个元素，执行应做的事情，然后停止。

我没有使用id，而是使用class作为选择器，并构建了两个函数：

一个用于启用的checkbox
用于禁用的一个。

我简单地通过遍历具有特定class名称的元素来实现这一目标。

查看代码段，看看它是否对您有用；）

function disable(obj){
    const elem = document.getElementsByClassName("checks");
    for(let i = 0; i < elem.length; i++){
        if(obj != elem[i]){
            elem[i].disabled = true;
        }
    }
}

function enable(obj){
    const elem = document.getElementsByClassName("checks");
    for(let i = 0; i < elem.length; i++){
        if(obj != elem[i]){
            elem[i].disabled = false;
        }
    }
}

Checkbox 1: <input type="checkbox" class="checks"> <br>
Checkbox 2: <input type="checkbox" class="checks"> <br>
Checkbox 3: <input type="checkbox" class="checks"> <br>
Checkbox 4: <input type="checkbox" class="checks"> <br>
Checkbox 5: <input type="checkbox" class="checks"> <br>

<button onclick="disable(this)">Disable All</button>
<button onclick="enable(this)">Enable All</button>

如何启用特定div的禁用复选框？

1 个答案: