Question

如何在填充数组时禁用该复选框。

<c:forEach var="item" items="${flightItems}">
    <c:set var="k" value="${k+1}"/> 
    <tr>
        <td><c:out value="${k}"/></td>
        <td>${item.startPoint}</td>
        <td>${item.endPoint}</td>
        <td><input id="cb" type="checkbox"  name="itemId" value="${item.id}" onchange="check(this)"disabled/></td>
    </tr>
</c:forEach>

我需要点击一个复选框，其余部分被禁用。虽然我的所有尝试都导致所有复选框都被禁用。这是我的复选框方法。我理解我的错误，但我不知道如何解决它。你能提出一些建议吗？

function check(self) {
    var a = document.getElementById('cb');
    var checkValue = self.checked;
    for (i = 1; i < a.length; i++) {
        if (a[i].type == 'checkbox')
            a[i].checked = checkValue;
    }
}

Answer 1

这样的事情应该指向正确的方向。

首先，从id更改为class。 ID始终是唯一的，而类对于逻辑组件可以是相同的，如下所示：

<c:forEach var="item" items="${flightItems}">
    <c:set var="k" value="${k+1}"/> 
    <tr>
        <td><c:out value="${k}"/></td>
        <td>${item.startPoint}</td>
        <td>${item.endPoint}</td>
        <td><input class="cb" type="checkbox"  name="itemId" value="${item.id}" onchange="check(this)"disabled/></td>
    </tr>
</c:forEach>

第二，

function check(self) {
    var a = document.getElementsByClassName('cb'); // get elements by class name
    var checkValue = self.checked;
    for (i = 0; i < a.length; i++) { // iterate from 0 instead of 1
        if (a[i] != self && self.checked) // if checkbox is selected.
            a[i].disabled = true; // disable others
    }
}

示例：

＆＃13;

<input class='cb' type='checkbox' onchange="check(this)" value="1">One
<input class='cb' type='checkbox' onchange="check(this)" value="2">Two
<input class='cb' type='checkbox' onchange="check(this)" value="3">Three
<input class='cb' type='checkbox' onchange="check(this)" value="4">Four
<script>
function check(self) {
    var a = document.getElementsByClassName('cb'); // get elements by class name
    var checkValue = self.checked;
    for (i = 0; i < a.length; i++) { // iterate from 0 instead of 1
        if (a[i] != self && self.checked) // if checkbox is selected.
            a[i].disabled = true; // disable others
    }
}
</script>

＆＃13;

如何禁用该复选框？

1 个答案: