将特定复选框作为单选按钮处理?

时间:2013-10-17 08:57:54

标签: jquery html checkbox radio-button

我知道复选框和单选按钮是两种不同类型的数据输入这一事实,而想要使用其中一种能够完成另一种操作的人有点像打扮一只猫假装它是一只狗 - 但是我希望这些复选框的操作方式没有别的办法(我稍后会告诉你)。

我创建了一个数据输入页面,其中一名员工可以将特定的课程资格分配给指定年份组中的课程。这些资格的工作方式非常简单:可以为任何班级分配多个资格证书除了一个:同一个班级不可能同时拥有EnAQA4700和EnAQA4705资格。

因此,一个班级可以同时拥有最多四个资格(复选框,简单),4700和4705是一个例外;可以是4700,可以是4705,也可以是不能两者(单选按钮!)

是否可以将前两个复选框(对于EnAQA4700和EnAQA4705)视为单选按钮,但仍然可以与其他复选框一起写入数据库?

非常感谢!

enter image description here

修改

这是表格第一行的HTML代码。您将看到类名包含一个PHP数组变量,并且在我之前的一个问题中,关于复选框识别要使用数组写入的类,我被告知相应地命名复选框。

<tr>
<td height="30"><?php echo $cl[0] ?></td>
<td height="30"><input type="checkbox" name="Classes[<?php echo $cl[0]; ?>][]" id="checkbox"></td>
<td height="30"><input type="checkbox" name="Classes[<?php echo $cl[0]; ?>][]" id="checkbox2"></td>
<td height="30"><input type="checkbox" name="Classes[<?php echo $cl[0]; ?>][]" id="checkbox3"></td>
<td height="30"><input type="checkbox" name="Classes[<?php echo $cl[0]; ?>][]" id="checkbox4"></td>
<td height="30"><input type="checkbox" name="Classes[<?php echo $cl[0]; ?>][]" id="checkbox5"></td>
</tr>

1 个答案:

答案 0 :(得分:1)

我认为尽可能将它与HTML结构分开的最简单方法是将一个类(例如incompatible)添加到每行中彼此不兼容的复选框(只有一个)他们可以在任何时候选择)。然后你的jQuery看起来像这样:

$(document).ready(function() {
    $('.incompatible').on('change', function (e) {
        if($(this).closest('tr').find('.incompatible:checked').not(this).length > 0)
            this.checked = false;
    });
});

基本上当您(尝试)更改其中一个复选框的已检查状态时,它将查看该<tr>元素中的其他复选框,以查看是否存在具有该类且已选中的任何复选框。如果至少有其中一个,则会将已更改复选框的checked属性设置为false

jsFiddle demo

相关问题