Question

我有一个包含3个复选框的页面，我需要做一些自定义的jQuery验证。以下是3个复选框的副本。

我想要做的是设置它，以便用户只能选择前2个复选框中的一个（如果他们选择第一个，使第二个不可用，反之亦然。然后，如果用户选择了一个在前两个框中，他们可以选择第三个复选框。

有人能够帮忙解决这个问题吗？

 <input type="checkbox" name="upselldigitaldisplay" class="ap_upsellstandard ap_webupsellstandard ap_upsell_default_off ap_upsell_allowed_all" id="upselldigitaldisplay" value="1">

 <input type="checkbox" name="upsellenhancedclassificationad" class="ap_upsellstandard ap_webupsellstandard ap_upsell_default_off ap_upsell_allowed_all" id="upsellenhancedclassificationad" value="1">

 <input type="checkbox" name="upselljnpriority" class="ap_upsellstandard ap_webupsellstandard ap_upsell_default_off ap_upsell_allowed_all" id="upselljnpriority" value="1">

Answer 1

以下是我在JSFiddle http://jsfiddle.net/wfjGm/

上发起的解决方案

由于你没有任何ID可以使用，我必须选择元素位置。

$(document).ready(function(){

$('input:checkbox:eq(2)').attr("disabled", true);  // Step 1

    $('input:checkbox').click(function(){ // Step 2

            if ( ($('input:checkbox:eq(0)').is(':checked')) || ($('input:checkbox:eq(1)').is(':checked')) ){ // Step 3
                            $('input:checkbox:eq(2)').attr("disabled", false);   // Step 4          
            }


            else {    
                $('input:checkbox:eq(2)').attr("disabled", true); //Step 5
                }

    }); 

});

步骤1）在文档就绪时禁用第3个复选框（：eq使用0索引，因此第3个复选框是元素2）
步骤2）每次单击复选框时，在点击事件上运行一个函数步骤3）检查是否选中了第一个或第二个复选框，如果是，则启用第三个复选框步骤4）步骤5 - 如果用户取消选择前两个中的一个，则禁用该复选框的后退语句。

快速编辑 如果您想要确保第三个复选框在取消选中时取消选中，如果取消选中前两个复选框，则将步骤5中的else行更改为此...

$('input:checkbox:eq(2)').attr("disabled", true).attr("checked", false); }

Answer 2

我为cache the selectors提供了一个解决方案，并为了演示而使用.prop。

$(function() {
    var $options = $('.option');
    var $priority = $('#upselljnpriority');

    function uncheckOtherOptions(domElem) {
        if (domElem.checked) {
            $options.not(domElem).prop('checked', false);
        }
    }

    function togglePriorityAvailability() {
        if ($options.is(':checked')) {
            $priority.prop('disabled', false);
        } else {
            $priority.prop('disabled', true);
            $priority.prop('checked', false);
        }
    }

    $options.click(function () {
        uncheckOtherOptions(this);
        togglePriorityAvailability();
    });

    togglePriorityAvailability();
});

请注意，我在前两个选项中添加了option类。这使我能够制作非常快速和干净的选择器。这也是一个很好的做法，因为你的html代码是可扩展的，有更多选项而不需要任何JavaScript更改。如果不需要，可以使用

var $options = $('#upselldigitaldisplay, #upsellenhancedclassificationad');

请注意，我在开头的事件处理程序之外计算了$options和$priority，而且再也没有！这样我就可以缓存我的计算以供以后使用。这提高了性能。

请注意，我使用.prop来操作属性，因为我没有改变属性的意图，只有属性。

注意第$options.not(domElem).prop('checked', false);行。我使用了.not()和DOM元素作为输入。这意味着原始选择器减去给定的DOM元素。

请注意，我使用了命名函数（uncheckOtherOptions和togglePriorityAvailability）。我喜欢他们。他们提供了有关正在发生和应该发生的事情的更多细节。另外，通过使togglePriorityAvailability成为一个单独的函数，我可以重用它（注意最后一行在页面加载时将最后一个复选框设置为正确的状态）。

我还创建了 jsFiddle demo 供您测试。

Answer 3

我个人建议如下，但这需要对HTML进行一些更改（遵循jQuery）：

var radios = $('input[type="checkbox"].ap_upsellstandard');
radios.change(function () {
    var self = this,
        $self = $(self);
    if ($self.siblings().length) {
        // one of the first two:
        $self.siblings('input').prop('disabled', self.checked);
        $self.closest('fieldset').next('fieldset').toggle(self.checked);
    }
}).last().parent().hide();

JS Fiddle demo

更改后的HTML：

<fieldset>
    <legend>Select <strong>one</strong> of the following:</legend>
    <input type="checkbox" name="upselldigitaldisplay" class="ap_upsellstandard ap_webupsellstandard ap_upsell_default_off ap_upsell_allowed_all" id="upselldigitaldisplay" value="1" />
    <input type="checkbox" name="upsellenhancedclassificationad" class="ap_upsellstandard ap_webupsellstandard ap_upsell_default_off ap_upsell_allowed_all" id="upsellenhancedclassificationad" value="1" />
</fieldset>
<fieldset>
    <input type="checkbox" name="upselljnpriority" class="ap_upsellstandard ap_webupsellstandard ap_upsell_default_off ap_upsell_allowed_all" id="upselljnpriority" value="1" />
</fieldset>

参考文献：

复选框上的jQuery验证

3 个答案: