我在表单中使用复选框列表。 我在复选框列表中有多个选项。 当其中一个选项被选中时，其他选项应该被禁用，这样用户就不应该被允许选择其他选项。
我已经在事件处理程序的 c# 中完成了它，但我不能再使用回发 我们如何在 javascript 或 jquery 中做到这一点
foreach (ListItem li in chk_mycheckbox.Items)
{
if ((!(li.Text.ToString().Contains("Unknown"))))
{
li.Enabled = false;
}
}
【问题讨论】：
标签： javascript jquery asp.net checkboxlist
您是否真的想要一组单选按钮。
例如
<li><input type="radio" name="gender" value="male">Male</li>
<li><input type="radio" name="gender" value="female">Female</li>
因为它只会强制一个选择。
但是，在您当前的情况下，您可以使用以下行来循环复选框并禁用任何未选中的复选框。 （这是使用 jquery 1.6+）
$('input[type=checkbox]').each(function () {
if(!$(this).is(':checked')){
//if not checked
$(this).prop('disabled', true);
}
});
从您的评论开始。
为应该禁用其他类的复选框提供额外的类，例如“单选”。然后你的代码看起来像这样：
$(document).ready(function() {
$('#formId input.single-selection').on('click', function (e) {
var selectedCheckbox = $(this);
if(selectedCheckbox.is(':checked')){
$('#formId input[type=checkbox]').each(function () {
if(selectedCheckbox[0] != $(this)[0]){
//if not selected checkbox
$(this).prop('disabled', true);
$(this).attr('checked', false);
}
});
}else{
$('#formId input[type=checkbox]').prop('disabled', false);
}
});
});
我没有测试过，但我相信这就是你需要的。只需将 ids 和 classes 替换为您正在使用的内容即可。
【讨论】：
假设您希望在用户取消选择所选选项时启用其他选项，您可以尝试此代码。该代码假定您的表单的 ID 为“form1”
$('#form1 input').on('click',function(evt){
var clickedEl = evt.target;
if(clickedEl.checked){
$('#form1 input').each(function(){
$(this).attr('disabled',true);
});
$(clickedEl).attr('disabled',false);
}
else{
$('#form1 input').each(function(){
$(this).attr('disabled',false);
});
}
});
请注意，在 jquery 中，each 函数允许您向它传递一个函数，该函数将在选择器匹配的每个元素上调用。
这是一个代码工作的 jsfiddle：http://jsfiddle.net/vvt5g/
【讨论】：
同意安德鲁的回答，那就是单选按钮的功能。
无论如何，更进一步，您还需要控制用户是否取消选中该复选框。
给定一个复选框列表：
<input type='checkbox' >A
<input type='checkbox' >B
<input type='checkbox' >C
<input type='checkbox' >D
脚本部分可以这样工作：
<script>
var checked = false; //will save current state of checkboxes
$('input:checkbox').click(function(){
//if one was checked and then unchecked will enable all and return
if(checked)
{
$('input:checkbox').each(function(){
$(this).prop('disabled', false);
});
checked = false;
return;
}
//if none was checked before, disable the rest
$('input:checkbox').each(function(){
if(!$(this).is(':checked')){
$(this).prop('disabled', true);
}
else
checked = true;
});
});
</script>
【讨论】：
我已经为你创建了一个 JsFiddle：
简而言之，我在每个复选框上添加了一个类 myCheckBox，并在 Click 上添加了以下 jQuery 代码：
$('.myCheckBox').click(function(){
var currentId = $(this).attr('id');
$('.myCheckBox').each(function(){
if($(this).attr('id') != currentId){
$(this).attr("checked", false);
}
});
});
如果您在特定 ID 下有复选框，那么您可以使用
#YourID 输入：复选框
例子：
$('#YourID input:checkbox').click(function(){
var currentId = $(this).attr('id');
$('#YourID input:checkbox').each(function(){
if($(this).attr('id') != currentId){
$(this).attr("checked", false);
}
});
});
【讨论】：
试试这个
HTML：
<ul>
<li><input type="checkbox" name="gender" value="male">Male</li>
<li><input type="checkbox" name="gender" value="female">Female</li>
</ul>
jQuery 代码
$('input').change(function(){
if( $(this).prop('checked') ){
$(this).parent().parent().find('input').prop('disabled', true);
$(this).prop('disabled', false);
}
});
【讨论】：
这就是你的做法
$(document).ready(function () {
var checked = false;
$('#<%=lstExposureValue.ClientID%> input:checkbox').click(function () {
var currentIdone = 'Unknown';
var currentId = $(this).next().html();
if (currentId == currentIdone) {
if (checked) {
$("#<%=lstExposureValue.ClientID%> input").removeAttr('disabled');
checked = false;
return;
}
else {
$("#<%=lstExposureValue.ClientID%> input").attr('checked', false);
$(this).attr('checked', true);
$('#<%=lstExposureValue.ClientID%> input:not(:checked)').attr('disabled', 'disabled');
checked = true;
}
}
});
});
【讨论】：