0

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

我想做的是设置它，以便用户只能选择前 2 个复选框中的一个（如果他们选择第一个，则使第二个不可用，反之亦然。然后，如果用户选择了第一个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">
4

3 回答 3

0

我个人建议以下内容，尽管这需要对您的 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 小提琴演示。

更改后的 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>

参考：

于 2013-05-29T07:07:05.433 回答
0

这是我在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); }
于 2013-05-29T06:22:16.453 回答
0

我已经为您制定了一个解决方案，我缓存了选择器，并且也.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 演示供您测试。

于 2013-05-29T06:54:41.883 回答