Question

我正在尝试自定义预先格式化的注册表单，以便客户加入我们的邮件列表。基本上我有三个不同的“兴趣小组” - 一个利息小组每周收到几次关于狗的信息，另一个利益小组每周收到几次关于猫的信息，然后是第三组只收到一次 - 一次 - 这两个科目的周更新。客户可以同时订阅一个和两个兴趣小组，但是如果他们订阅了第三组，他们就不能订阅另外两个。

使用电子邮件服务提供商提供的以下代码 - 如果客户点击第三个复选框，我需要禁用前两个复选框。

现有Java脚本（页面似乎使用jquery）：

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
        google.load("jquery", "1.4.2");
    </script> 
    <script type="text/javascript"> 
        $(document).ready(function(){   
            try {
            $('#archive-list li:even').addClass("odd");
            $('.field-group, .field-group input, .field-group select').live('click',function(event){                    
                if (event.type == 'click') {
                    if ($(this).hasClass('field-group')){
                        var fg = $(this);
                        $(this).find('input, select').slice(0,1).focus();
                    } else {
                        var fg = $(this).parents('.field-group');
                        $(this).focus();
                    }
                    fg.not('.focused-field').addClass('focused-field').children('.field-help').slideDown('fast');
                    $('.focused-field').not(fg).removeClass('focused-field').children('.field-help').slideUp('fast');
                }
            });
            } catch(e){ console.log(e); }
        });     
    </script>

然后是HTML：

<ul class="interestgroup_field" id="interestgroup_field_400000">
                <li class="interestgroup_row"><input type="checkbox" id="group_128" name="group[1][128]" value="1">&nbsp;<label for="group_128">E-mails about Dogs</label></li>
                <li class="interestgroup_row"><input type="checkbox" id="group_256" name="group[1][256]" value="1">&nbsp;<label for="group_256">E-mails about Cats</label></li>
            </ul>
            <br>
            <ul class="interestgroup_field" id="interestgroup_field_400000">
                <li class="interestgroup_row"><input type="checkbox" id="group_2" name="group[1][2]" value="1">&nbsp;<label for="group_2" >Once A Week - Summary E-mail</label></li>
            </ul>

请注意唯一ID - 这些ID用于与数据库同步。我已经搜索了一个答案，但是我能找到的最佳解决方案是对所有复选框使用相同的ID，这对我的应用程序不起作用。

感谢您的时间 - 任何帮助将不胜感激！

干杯，麦克

Answer 1

如上所述，您的2个UL不能拥有相同的ID。这很糟糕，会导致问题。如果需要存储数据库记录标识符，则使用HTML5 data- *属性或使用类：

<ul class="interestgroup_field" data-id="interestgroup_field_400000">
    <li class="interestgroup_row"><input type="checkbox" id="group_128" name="group[1][128]" value="1">&nbsp;<label for="group_128">E-mails about Dogs</label></li>
    <li class="interestgroup_row"><input type="checkbox" id="group_256" name="group[1][256]" value="1">&nbsp;<label for="group_256">E-mails about Cats</label></li>
</ul>
<br />
<ul class="interestgroup_field" data-id="interestgroup_field_400000">
    <li class="interestgroup_row"><input type="checkbox" id="group_2" name="group[1][2]" value="1">&nbsp;<label for="group_2" >Once A Week - Summary E-mail</label></li>
</ul>

然后，有些事情应该这样做：

$(document).ready(function() {
    $('ul.interestgroup input:checkbox').change(function() {
        // see if this is the 3rd checkbox that is by itself
        if ($(this).closest('ul').children().length > 1) return; // nope
        // grab the other 2 checkboxes so we can fiddle with them
        var cbs = $(this).closest('ul').prev().prev().find('input:checkbox');

        if ($(this).attr('checked')) {
            // disable the others
            cbs.attr({ 'checked': false, 'disabled': 'disabled' });
        } else {
            // enable the others
            cbs.attr({ 'disabled': '' });
        }
    });
});

如果你的复选框并不总是如上所述，那么这是另一种较少依赖于HTML结构的解决方案：

为了使其有效，在生成复选框时，您需要在每个复选框上放置几个信息。在“组合”复选框中，您要添加一个特殊的CSS类，以将复选框标记为组合复选框。具有此类的复选框将触发特殊行为。其次，在组合复选框上，您希望保留要禁用的复选框的ID：

<input type="checkbox" id="group_128" name="group[1][128]" value="1">Cats</input>
<input type="checkbox" id="group_256" name="group[1][256]" value="1">Dogs</input>
<!-- random html --!>
<input type="checkbox" id="group_2" name="group[1][2]" value="1"
    class="combined" data-other-cb="#group_128,#group_256">
    Cats and dogs</input>

了解我们如何将“合并”作为复选框的css类？使用你想要的任何css类，它不需要任何样式规则。我们只需要将它用作标记类。并看看我们如何使用“data-other-cb”属性来放置逗号分隔的其他复选框的ID列表？另请注意，我们在每个ID前面放置了一个“＃”。这使它成为一个有效的jQuery选择器字符串，因此我们可以将整个值传递给jQuery以获取所有问题的复选框

现在我们可以编写以下jquery委托方法：

$(document).ready(function() {
    $('body').delegate('.combined', 'change', function() { // hookup to change event of all current and future .combined elements
        // get the ids of the checkboxes we need to control
        var ids = $(this).attr('data-other-cb');
        if (!ids) return; // no other ids

        // find the checkboxes and manipulate them
        var cbs = $(ids);

        if ($(this).attr('checked')) {
            // disable the others
            cbs.attr({ 'checked': false, 'disabled': 'disabled' });
        } else {
            // enable the others
            cbs.attr({ 'disabled': '' });
        }
    }); // delegate()
}); // ready()

单击其他复选框时禁用复选框 - 全部使用不同的ID

1 个答案: