gpt4 book ai didi

javascript - 使用javascript防止用户随机选中复选框

转载 作者:太空宇宙 更新时间:2023-11-04 15:29:00 30 4
gpt4 key购买 nike

我有以下测试复选框。用户可以按任何顺序选择任何复选框。我的问题是如何使用 javascript/jquery 来防止用户随机选择复选框。我希望用户单击第一个复选框,然后单击第二个复选框,依此类推。

​1 <input type="checkbox" name="sports" value="1"  /><br />

2 <input type="checkbox" name="sports" value="2" /><br />

3 <input type="checkbox" name="sports" value="3" /><br />

4 <input type="checkbox" name="sports" value="4" />

我需要帮助编写脚本,该脚本只允许按顺序检查每个 chckboxx - 从左到右。

提前非常感谢

重新编辑的问题:

   <div class="siblings">
<ul>
<table class="table table-bordered">
<?php
$count = 1;

for($x=0; $x < 5; $x++){
?>
<td>
<div class="thumb">
<label for="image <?php echo $count;?>"><img class="img"
src="http://s5.tinypic.com/30v0ncn_th.jpg"/></label>
<input type="checkbox" class="chk " id="image <?php echo $count;?>"
name="tick" value="0" />
</div>
</td>

<?php
$count++;

}

?>
</table>
</ul>
</div>
</table>

最佳答案

num8er 比我快,但思路是一样的。

window.addEventListener('DOMContentLoaded', () => {
let checkboxes = document.querySelectorAll('[type="checkbox"]');

for (let ix = 0; ix < checkboxes.length; ix++) {
checkboxes[ix].addEventListener('change', toggle);
}

function toggle() {
if (this.checked) {
let el = this.nextElementSibling;
while (el && el.tagName !== 'INPUT') {
el = el.nextElementSibling;
}
if(el) el.disabled = false;
} else {
let el = this.nextElementSibling;
while (el) {
if (el.tagName === 'INPUT') {
el.disabled = true;
el.checked = false;
}
el = el.nextElementSibling;
}
}
}
});
<input type="checkbox" name="sports" value="1"  /><br />
<input type="checkbox" name="sports" value="2" disabled /><br />
<input type="checkbox" name="sports" value="3" disabled /><br />
<input type="checkbox" name="sports" value="4" disabled />

关于javascript - 使用javascript防止用户随机选中复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44959725/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com