我想在选中其中一些复选框时禁用剩余的取消选中框。这意味着，如果我选中任意两个框并获得其值，那么左侧未选中的另一个框将变为禁用。我已经做了一个函数来获得结果，但我得到的是，如果我选中一个框，那么所有的框都会被禁用。
<!DOCTYPE html>
<html>
<body>
<p id="demoo">How would you like your coffee?</p>
<form name="myform" action="/action_page.php">
<input type="checkbox" name="coffee" onclick="myFunction2()" value="100">With cream<br>
<input type="checkbox" name="coffee" onclick="myFunction2()" value="150">With sugar<br>
<input type="checkbox" name="coffee" onclick="myFunction2()" value="200">With milk<br>
<input type="checkbox" name="coffee" onclick="myFunction2()" value="250">With tea<br>
<br>
<input type="button" value="Send order">
<br><br>
<input type="text" id="order2" size="50">
<input type="text" id="order3" size="50">
<input type="submit" value="Submit">
</form>
<script>
function myFunction2() {
var coffee = document.querySelectorAll("[name = coffee]"); // To get arrays by Attribute in query selector use [] to get arrays of the same attribute. We can also use ("input[type = checkbox]") to get arrays.
var txt = "";
var i;
for (i = 0; i < coffee.length; i++) {
if (coffee[i].checked) {
txt = txt + coffee[i].value + ", ";
document.getElementById("order2").value = "You ordered a coffee with: " + txt.slice(0, -2);
}
if (coffee.length = 1) {
document.getElementById("demoo").innerHTML = i;
document.getElementById("order3").value = "Boxes left uncheck " + i;
coffee[i].setAttribute("style", "pointer-events: none; opacity: 0.5");
}
}
}
</script>
</body>
</html>
用单选按钮替换<input type="checkbox">：
<input type="radio" name="coffee" onclick="myFunction2()" value="100">With cream<br>
<input type="radio" name="coffee" onclick="myFunction2()" value="150">With sugar<br>
<input type="radio" name="coffee" onclick="myFunction2()" value="200">With milk<br>
<input type="radio" name="coffee" onclick="myFunction2()" value="250">With tea<br>
<script>
// ignore the code below: just so that stackoverflow dont throw errors on this snipet
function myFunction2() {}
</script>使用内联事件处理程序通常不是一个好主意。您可以在这里使用一些css选择器和一个循环。参见摘录(和注释(
// add a click handler to all clicks in the document
document.addEventListener(`click`, checkTheBoxes);
function checkTheBoxes(evt) {
// don't do anything if the click was not on one of the checkboxes
if (evt.target.name !== `coffee`) { return true; }
// get all checked checkboxes using the css selector
// "[name = coffee]:checked"
const coffee = document.querySelectorAll("[name = coffee]:checked");
// if 2 checkboxes are checked, disable the other two,
// using selector "[name = coffee]:not(:checked)")
if (coffee.length === 2) {
// [...[...]] 'spreads' the found elements into an Array
// which enables the use of 'forEach' on it.
[...document.querySelectorAll("[name = coffee]:not(:checked)")]
.forEach(cb => cb.disabled = true);
} else {
// enable if length !== 2
[...document.querySelectorAll("[name = coffee]:not(:checked)")]
.forEach(cb => cb.disabled = false);
}
}<p id="demoo">How would you like your coffee?</p>
<input type="checkbox" name="coffee" value="100">With cream<br>
<input type="checkbox" name="coffee" value="150">With sugar<br>
<input type="checkbox" name="coffee" value="200">With milk<br>
<input type="checkbox" name="coffee" value="250">With tea<br>
<br>
<button >Send order</button>
<div id="result"></div>function myFunction2() {
var coffee = document.getElementsByName('coffee');
var checked = [];
var maxChecked = 2;
// Order info
var order2 = document.getElementById("order2");
order2.value = "You ordered a coffee with: ";
// Loop all the checkboxes
for (var i = 0; i < coffee.length; i++) {
var chk = coffee[i];
if (chk.checked) {
// Add to checked
checked.push(chk);
// Add order info to the input
order2.value += chk.value;
if (checked.length < maxChecked) {
// Add a comma except for last element
order2.value += ", ";
}
}
if (checked.length == maxChecked) {
// Disable all and stop looping
coffee.forEach(e => e.disabled = true);
break;
}
}
// Unchecked boxes info
var order3 = document.getElementById("order3");
order3.value = "Boxes left uncheck " + (coffee.length - checked.length);
}<p id="demoo">How would you like your coffee?</p>
<form name="myform" action="/action_page.php">
<input type="checkbox" name="coffee" onclick="myFunction2()" value="100">With cream<br>
<input type="checkbox" name="coffee" onclick="myFunction2()" value="150">With sugar<br>
<input type="checkbox" name="coffee" onclick="myFunction2()" value="200">With milk<br>
<input type="checkbox" name="coffee" onclick="myFunction2()" value="250">With tea<br>
<br>
<input type="button" value="Send order">
<br><br>
<input type="text" id="order2" size="50">
<input type="text" id="order3" size="50">
<input type="submit" value="Submit">
</form>我希望这或多或少是你试图实现的。
这很好，只需在for循环中添加所需条件即可。
你可以给复选框一个id，然后按id获取这些复选框，并将其设置为false，如下所示，
document.getElementById("myCheck0").disabled = true;
对于多个，我们可以设置id："MyCheck0"，然后运行这样的循环：
function disableAllMyCheck() {
for(i = 0; document.getElementById("MyCheck" + i) !== null; i++) {
document.getElementById("MyCheck" + i).disabled = true;
}
}