单击一个复选框时如何禁用特定复选框？ JavaScript
Posted
技术标签:
【中文标题】单击一个复选框时如何禁用特定复选框？ JavaScript【英文标题】：How to disable specific checkboxes when one checkbox is clicked? JavaScript 【发布时间】：2018-02-21 14:21:11 【问题描述】：我想在单击复选框时禁用某些复选框。这是我想要实现的目标：
如果点击更换注册，禁用荣誉解雇和入学考试
如果点击了良好的道德证书，则禁用 Entrace Exam
如果荣誉解雇，禁用文凭、CUE 请求、CMI 请求、入学考试
如果点击记录的成绩单，请禁用 CUE 请求、CMI 请求、入学考试
如果是入学考试，全部禁用
<td><input type = "checkbox"name = "ac_description[]" value = "Replacement_of_Registration" ><b>Replacement of Registration</b>
<td><center><input type="number" name="quantity[]" style="width:60px;" ></center>
</tr>
<tr>
<td><input type = "checkbox"name = "ac_description[]" value = "Good_Moral_Certificate" ><b>Good Moral Certificate</b>
<td><center><input type="number" name="quantity[]" style="width:60px;" ></center>
</tr>
</tr>
<tr>
<td><input type = "checkbox" name = "ac_description[]" value = "Honorable_Dismissal " ><b>Honorable Dismissal</b>
<td><center><input type="number" name="quantity[]" style="width:60px;" ></center>
</tr>
</tr>
<tr>
<td><input type = "checkbox" name = "ac_description[]" value = "Transcript_of_Record"><b>Transcript of Record</b>
<td><center><input type="number" name="quantity[]" style="width:60px;"></center>
</tr>
<tr>
<td><input type = "checkbox" name = "ac_description[]" value = "Diploma"><b>Diploma</b>
<td><center><input type="number" name="quantity[]" style="width:60px;"></center>
</tr>
<tr>
<td><input type = "checkbox" name = "ac_description[]" value = "CUE_Request"><b>CUE Request</b>
<td><center><input type="number" name="quantity[]" style="width:60px;"></center>
</tr>
<tr>
<td><input type = "checkbox" name = "ac_description[]" value = "CMI_Request"><b>CMI Request</b>
<td><center><input type="number" name="quantity[]" style="width:60px;"></center>
</tr>
<tr>
<td><input type = "checkbox" name = "ac_description[]" value = "Entrance_Exam"><b>Entrance Exam</b>
<td><center><input type="number" name="quantity[]" style="width:60px;"></center>
</tr>
<tr>
<td><input type = "checkbox" name = "ac_description[]" value = "School_fees-Medical/Dental_Laboratory "><b>School fees-Medical/Dental Laboratory</b>
<td><center><input type="number" name="quantity[]" style="width:60px;"></center>
</tr>
<tr>
<td><input type = "checkbox" name = "ac_description[]" value = "School_fees-Transcript/Honorable"><b>School fees-Transcript/Honorable</b>
<td><center><input type="number" name="quantity[]" style="width:60px;"></center>
</tr>
<tr>
<td><input type = "checkbox" name = "ac_description[]" value = "School_fees-Library"><b>School fees-Library</b>
<td><center><input type="number" name="quantity[]" style="width:60px;"></center>
</tr>
<tr>
<td><input type = "checkbox" name = "ac_description[]" value = "Affiliation_Fees"><b>Affiliation Fees</b>
<td><center><input type="number" name="quantity[]" style="width:60px;"></center>
</tr>
<script language = "javascript">
$("input[type='checkbox']").click(function()
var val = $(this).attr('value');
switch(val)
case 'Replacement_of_Registration':
if($(this).is(':checked'))
$("input[value='Honorable_Dismissal '], input[value='Entrance_Exam']").prop('disabled',true);
else
$("input[value='Honorable_Dismissal '], input[value='Entrance_Exam']").prop('disabled',false);
break;
case 'Good_Moral_Certificate':
if($(this).is(':checked'))
$("input[value='Entrance_Exam']").prop('disabled',true);
else
$("input[value='Entrance_Exam']").prop('disabled',false);
break;
case 'Honorable_Dismissal ':
if($(this).is(':checked'))
$("input[value='Diploma'], input[value='CUE_Request'], input[value='CMI_Request'], input[value='Entrance_Exam']").prop('disabled',true);
else
$("input[value='Diploma'], input[value='CUE_Request'], input[value='CMI_Request'], input[value='Entrance_Exam']").prop('disabled',false);
break;
case 'Transcript_of_Record':
if($(this).is(':checked'))
$("input[value='CUE_Request'], input[value='CMI_Request'], input[value='Entrance_Exam']").prop('disabled',true);
else
$("input[value='CUE_Request'], input[value='CMI_Request'], input[value='Entrance_Exam']").prop('disabled',false);
break;
case 'Entrance_Exam':
if($(this).is(':checked'))
$("input[name='ac_description[]']").not(this).prop('disabled',true);
else
$("input[name='ac_description[]']").not(this).prop('disabled',false);
break;
);
$('.class_name').each( function()
$this.onClick( function()
if( $(this).is(':checked') )
$('.class_name').each( function()
if( $(this).not(':checked') )
$(this).prop('disabled', true);
)
</script>
【问题讨论】：
$this.onClick( function())有一些错误，$this是什么，有onclick功能吗？
@cale_b 这不是英文堆栈，'wanna' 是一个被广泛接受和理解的俚语，几乎使它成为一个词。
【参考方案1】：
您可以这样做的一种方法是，因为您已经知道在单击某些复选框时要禁用哪些复选框， 给复选框一个 data-disable 属性和值作为你要禁用的复选框，
看这个例子..只需单击第一个复选框即可尝试
https://jsfiddle.net/xw23ks5n/1/
<input type="checkbox" name="ac_description[]" data-disable="Honorable_Dismissal,Entrance_Exam" value="Replacement_of_Registration"><b>Replacement of Registration</b>
值是 Id（我给了其他复选框）
<input type="checkbox" name="ac_description[]" value="Honorable_Dismissal" id="Honorable_Dismissal">
<input type="checkbox" name="ac_description[]" value="Entrance_Exam" id="Entrance_Exam"><b>Entrance Exam</b>
然后你只需要这个通用函数来禁用复选框
$("input[type='checkbox']").click(function()
$("input[type='checkbox']").each(function()
$(this).prop('disabled',false);
);
if($(this).is(":checked"))
var checkboxesToDisableList = $(this).data('disable').split(',');
$.each(checkboxesToDisableList, function()
var id = "#"+this;
$(id).prop('disabled',true);
);
);
希望对你有帮助
【讨论】：
很好的建议！【参考方案2】：您的点击事件需要在 DOM 准备就绪后进行注册。
$(document).ready(function ()
//Your JS goes here.
);
当您在 jQuery 文档中更新时，我已经测试了您的代码，它工作正常（除了缺少几个大括号和右括号）。
$(document).ready(function ()
$("input[type='checkbox']").click(function ()
var val = $(this).attr('value');
switch (val)
case 'Replacement_of_Registration':
if ($(this).is(':checked'))
$("input[value='Honorable_Dismissal '], input[value='Entrance_Exam']").prop('disabled', true);
else
$("input[value='Honorable_Dismissal '], input[value='Entrance_Exam']").prop('disabled', false);
break;
case 'Good_Moral_Certificate':
if ($(this).is(':checked'))
$("input[value='Entrance_Exam']").prop('disabled', true);
else
$("input[value='Entrance_Exam']").prop('disabled', false);
break;
case 'Honorable_Dismissal ':
if ($(this).is(':checked'))
$("input[value='Diploma'], input[value='CUE_Request'], input[value='CMI_Request'], input[value='Entrance_Exam']").prop('disabled', true);
else
$("input[value='Diploma'], input[value='CUE_Request'], input[value='CMI_Request'], input[value='Entrance_Exam']").prop('disabled', false);
break;
case 'Transcript_of_Record':
if ($(this).is(':checked'))
$("input[value='CUE_Request'], input[value='CMI_Request'], input[value='Entrance_Exam']").prop('disabled', true);
else
$("input[value='CUE_Request'], input[value='CMI_Request'], input[value='Entrance_Exam']").prop('disabled', false);
break;
case 'Entrance_Exam':
if ($(this).is(':checked'))
$("input[name='ac_description[]']").not(this).prop('disabled', true);
else
$("input[name='ac_description[]']").not(this).prop('disabled', false);
break;
);
$('.class_name').each(function ()
$this.on('click', function ()
if ($(this).is(':checked'))
$('.class_name').each(function ()
if ($(this).not(':checked'))
$(this).prop('disabled', true);
)
);
);
);
【讨论】：
要明确一点：$(function() ... );处理 DOM 就绪，而不是 onLoad，这是一个不同的事件。【参考方案3】：首先修复您的 html 结构，这样您就不会有多余的标签挂在我们的未关闭或未打开的标签上
以下是解决方案。你错过了大量的右括号和右括号
最后，jQuery 只有一个 click 方法而不是 onClick 方法...通过一个简单的网站运行您的代码以验证您的 HTML，因为您似乎仍在学习这里是 official W3C standard that it will validate
<!DOCTYPE html>
<html>
<head>
<title>checkbox removal</title>
</head>
<body>
<td><input type="checkbox" name="ac_description[]" value="Replacement_of_Registration"><b>Replacement of Registration</b>
<td>
<center><input type="number" name="quantity[]" style="width:60px;"></center>
</tr>
<tr>
<td><input type="checkbox" name="ac_description[]" value="Good_Moral_Certificate"><b>Good Moral Certificate</b>
<td>
<center><input type="number" name="quantity[]" style="width:60px;"></center>
</tr>
</tr>
<tr>
<td><input type="checkbox" name="ac_description[]" value="Honorable_Dismissal "><b>Honorable Dismissal</b>
<td>
<center><input type="number" name="quantity[]" style="width:60px;"></center>
</tr>
</tr>
<tr>
<td><input type="checkbox" name="ac_description[]" value="Transcript_of_Record"><b>Transcript of Record</b>
<td>
<center><input type="number" name="quantity[]" style="width:60px;"></center>
</tr>
<tr>
<td><input type="checkbox" name="ac_description[]" value="Diploma"><b>Diploma</b>
<td>
<center><input type="number" name="quantity[]" style="width:60px;"></center>
</tr>
<tr>
<td><input type="checkbox" name="ac_description[]" value="CUE_Request"><b>CUE Request</b>
<td>
<center><input type="number" name="quantity[]" style="width:60px;"></center>
</tr>
<tr>
<td><input type="checkbox" name="ac_description[]" value="CMI_Request"><b>CMI Request</b>
<td>
<center><input type="number" name="quantity[]" style="width:60px;"></center>
</tr>
<tr>
<td><input type="checkbox" name="ac_description[]" value="Entrance_Exam"><b>Entrance Exam</b>
<td>
<center><input type="number" name="quantity[]" style="width:60px;"></center>
</tr>
<tr>
<td><input type="checkbox" name="ac_description[]" value="School_fees-Medical/Dental_Laboratory "><b>School fees-Medical/Dental Laboratory</b>
<td>
<center><input type="number" name="quantity[]" style="width:60px;"></center>
</tr>
<tr>
<td><input type="checkbox" name="ac_description[]" value="School_fees-Transcript/Honorable"><b>School fees-Transcript/Honorable</b>
<td>
<center><input type="number" name="quantity[]" style="width:60px;"></center>
</tr>
<tr>
<td><input type="checkbox" name="ac_description[]" value="School_fees-Library"><b>School fees-Library</b>
<td>
<center><input type="number" name="quantity[]" style="width:60px;"></center>
</tr>
<tr>
<td><input type="checkbox" name="ac_description[]" value="Affiliation_Fees"><b>Affiliation Fees</b>
<td>
<center><input type="number" name="quantity[]" style="width:60px;"></center>
</tr>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script type="text/javascript">
$("input[type='checkbox']").click(function()
var val = $(this).attr('value');
switch (val)
case 'Replacement_of_Registration':
if ($(this).is(':checked'))
$("input[value='Honorable_Dismissal '], input[value='Entrance_Exam']").prop('disabled', true);
else
$("input[value='Honorable_Dismissal '], input[value='Entrance_Exam']").prop('disabled', false);
break;
case 'Good_Moral_Certificate':
if ($(this).is(':checked'))
$("input[value='Entrance_Exam']").prop('disabled', true);
else
$("input[value='Entrance_Exam']").prop('disabled', false);
break;
case 'Honorable_Dismissal ':
if ($(this).is(':checked'))
$("input[value='Diploma'], input[value='CUE_Request'], input[value='CMI_Request'], input[value='Entrance_Exam']").prop('disabled', true);
else
$("input[value='Diploma'], input[value='CUE_Request'], input[value='CMI_Request'], input[value='Entrance_Exam']").prop('disabled', false);
break;
case 'Transcript_of_Record':
if ($(this).is(':checked'))
$("input[value='CUE_Request'], input[value='CMI_Request'], input[value='Entrance_Exam']").prop('disabled', true);
else
$("input[value='CUE_Request'], input[value='CMI_Request'], input[value='Entrance_Exam']").prop('disabled', false);
break;
case 'Entrance_Exam':
if ($(this).is(':checked'))
$("input[name='ac_description[]']").not(this).prop('disabled', true);
else
$("input[name='ac_description[]']").not(this).prop('disabled', false);
break;
default:
break;
);
$('.class_name').each(function()
$this.click(function()
if ($(this).is(':checked'))
$('.class_name').each(function()
if ($(this).not(':checked'))
$(this).prop('disabled', true);
)
);
);
</script>
</body>
</html>
【讨论】：
好吧，琼作为名字和图片显示......是一个女人，所以我认为“该死的男人有太多错误”是不合适的；） @Reflective 很公平，直到通读后才意识到，但 man 确实指的是 person 以及 4a 我说的是“正确” - 请在字典中查一下 ;) @cale_b 以后我不会这样做了。以上是关于单击一个复选框时如何禁用特定复选框？ JavaScript的主要内容，如果未能解决你的问题，请参考以下文章