Флажки отключены, когда установлен другой флажок - все с разными идентификаторами

Question

Я пытаюсь настроить предварительно отформатированную форму регистрации, чтобы клиенты могли присоединиться к нашему списку рассылки.По сути, у меня есть три разные группы интересов - одна группа интересов, которая получает информацию о собаках несколько раз в неделю, другая группа интересов, которая получает информацию о кошках несколько раз в неделю, а затем третья группа, которая просто получает раз в годнедельное обновление по обоим предметам.Клиенты могут подписаться как на одну, так и на две группы интересов одновременно, однако, если они подпишутся на группу три, они не смогут подписаться на две другие.

Работа с кодом ниже, предоставленным e- почтовый поставщик услуг - мне нужно отключить первые два флажка, если клиент нажимает третий флажок.

Существующий сценарий 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>

Обратите внимание на уникальные идентификаторы - они используются для синхронизации с базой данных.Я искал ответ, однако лучшее решение, которое я мог найти, - использовать один и тот же идентификатор для всех флажков, который не работает для моего приложения.

Спасибо за ваше время - любая помощь будеточень признателен!

Ура, Майк

Answer 1

Как уже упоминалось, у ваших двух UL не может быть одинаковый идентификатор.Это плохо и приведет к проблемам.Если вам нужно сохранить идентификатор записи базы данных, используйте атрибуты данных data5 * HTML5 или используйте классы:

<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-класс, чтобы пометить флажок как комбинированный флажок.Флажки с этим классом вызовут особое поведение.Во-вторых, в комбинированном флажке вы хотите оставить идентификаторы флажков, которые он должен отключить:

<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», чтобы поместить список разделенных запятыми идентификаторов других флажков?Также обратите внимание, что мы поместили «#» перед каждым идентификатором.Это делает его допустимой строкой селектора 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()