在项目中难免会遇到一些表单的提交，尤其是多选框中，当用户选择了某一项时，禁止其他项的选择。所以为了避免这样的冲突，所以我们前端就得控制一下了，下面就来个简单demo，记录一下，有需要的伙伴可以拿去耍耍~~
1、先放一张极丑的demo效果图：
2、html代码：
<body>
<div class="mybox">
<p>1、请选择你喜欢吃的甜品：</p>
<input type="checkbox" class="mycheckbox" name="mycheck" value="雪糕"/>雪糕
<input type="checkbox" class="mycheckbox" name="mycheck" value="蛋糕"/>蛋糕
<input type="checkbox" class="mycheckbox" name="mycheck" value="无"/>无
</div>
<div class="mybox">
<p>1、请选择你喜欢的运动：</p>
<input type="checkbox" class="mycheckbox" name="mycheck" value="滑雪"/>滑雪
<input type="checkbox" class="mycheckbox" name="mycheck" value="爬山"/>爬山
<input type="checkbox" class="mycheckbox" name="mycheck" value="无"/>无
</div>
<div class="mybox">
<p>1、请选择你喜欢吃的美食：</p>
<input type="checkbox" class="mycheckbox" name="mycheck" value="烧烤"/>烧烤
<input type="checkbox" class="mycheckbox" name="mycheck" value="海鲜"/>海鲜
<input type="checkbox" class="mycheckbox" name="mycheck" value="无"/>无
</div> <div><button id="commit">提交</button></div>
</body>
3、script 代码：
<script type="text/javascript">
for(var i = 0 ; i < $(".mybox").length; i++){
for(var j = 0 ; j < $(".mybox")[i].childNodes.length; j++){
$(".mybox")[i].childNodes[j].onclick = function(){
if($(this)[0].nextSibling.nodeType == 3 && $.trim($(this)[0].nextSibling.textContent) == "无"){
if(this.checked){
$(this).siblings().prop("disabled",true)
$(this).siblings().prop("checked",false)
}
else{
$(this).siblings().prop("disabled",false)
}
}
}
}
}
$("#commit").click(function(){
$("input[name='mycheck']:checked").each(function(){
$("body").append(this.value+"、")
})
})
</script>