0

我想在我的表单中使用 javascript 来制作它，以便在选中一个复选框后，该组中的其他复选框被禁用，因此用户最多只能选择一个选项。

这是我的html表单：

<label>
    <input type="checkbox" name="subscription[]" value="Sweets" id="subscription_1" />
    Sweets
</label>
&nbsp;
<label>
    <input type="checkbox" name="subscription[]" value="Chocolate" id="subscription_2" />
    Chocolate
</label>
&nbsp;
<label>
    <input type="checkbox" name="subscription[]" value="Fruit & Veg" id="subscription_3" />
    Fruit & Veg
</label>

这是我正在尝试使用的 javascript：

//Check check box
//Script for questions where you check one option or the other (locks other options out)
$(':checkbox').click(function(){ 
    var $checkbox = $(this);
    var isChecked = $checkbox.is(':checked')

    //If no option is checked, the make all the options available to be selected
    //Otherwise, one option must be checked so lock out all other options
    if(isChecked)
        $checkbox.subscription(":checkbox").attr("disabled", "disabled");
    else
        $checkbox.subscription(":checkbox").removeAttr("disabled"); 

});​

有人可以解释我哪里出错了吗？

4

3 回答 3

1

你几乎可以做你所做的：

$(':checkbox').click(function(){
    $(':checkbox').attr("disabled", "disabled");
    $(this).removeAttr("disabled");
});

无需测试：禁用所有，然后启用单击的。

示范

请注意，此 UI 可能会令用户感到不安：这不是正确提出的复选框的行为方式。例如，用户会惊讶于他们的选择在第一次点击时被锁定。

于 2012-10-29T20:27:14.243 回答
0

这将起作用：

var $checkboxes = $(':checkbox').click(function(){
    $checkboxes.filter('[name="' +
                        this.name.replace(/\[/g,'\\[').replace(/\]/g,'\\]') +
                        '"]')
               .not(this).prop('disabled',this.checked);
});

也就是说，保留对变量（我称之为$checkboxes）中所有复选框的引用，以节省每次都必须创建一个新的 jQuery 对象，然后在单击一个时，您可以禁用或重新启用所有其他复选框通过使用.filter()方法和.not方法排除当前的同名。

另请注意（除非您使用的是旧版本的 jQuery）该.prop()方法是设置 disabled 属性的适当方法。

演示：http: //jsfiddle.net/rnbMB/2/

我是否可以建议，如果您只是取消选中其他复选框而不是禁用其他复选框，这对用户会更好吗？这样，一次最多只能检查一个，但用户不必先取消选中当前一个，然后再选择另一个：

var $checkboxes = $(':checkbox').click(function(){
    if (this.checked)
        $checkboxes.filter('[name="' +
                    this.name.replace(/\[/g,'\\[').replace(/\]/g,'\\]') +
                    '"]')
                   .not(this).prop('checked',false);
});

演示：http: //jsfiddle.net/rnbMB/3/

当然，无论哪种方式，您都需要将该代码放入文档就绪处理程序和/或出现在所有复选框之后的脚本块中。（文档就绪处理程序可能是最好的，因为它将$checkboxes变量保持在全局范围之外。）

于 2012-10-29T20:57:24.387 回答
-1

尝试使用prop而不是attr

 if(isChecked)
    $checkbox.subscription(":checkbox").prop("disabled", true);
else
    $checkbox.subscription(":checkbox").prop("disabled",false);
于 2012-10-29T20:29:39.443 回答