Установите флажок, который проверяет другой флажок

0

Итак, вот как выглядит моя форма.

http://jsfiddle.net/jFN5T/5/

и JS я попробовал:

$('#work_direction').on('click' , function() {

    $('.cad, .design, .shop, .cnc').on('click', function(){

        $classname = $(this).attr('class');
        if($('.' + $classname + ":checked").length > 0){
            $('#' + $classname).attr('checked','checked');
        } else {
            $('#' + $classname).removeAttr('checked');
        }
    });

});

Там есть некоторые функции, и это работает, насколько я знаю. Тем не менее, я хочу сделать так, чтобы, когда "Мексика" выбрана в Direction, когда пользователь проверяет S-SHOP или M-CNC, он не должен проверять эти два в зависимых отделах

  • Магазин (John Doe [3])
  • CNC (John Doe [4])

но вместо этого он должен проверить

  • Мексика (Джон Доу [7])

Форма должна работать так же, как и для внутренних и оффшорных, в том случае, когда нижние C, D, S, M проверяются, тогда верхняя CAD, Design, Shop, CNC, проверяется. Функциональность изменяется, как описано выше, когда пользователь выбирает "Мексику" в качестве направления.

Вот код, который я пробовал, Check and uncheck checkbox работает неправильно, но у меня были проблемы, описанные в комментарии beautifulcoder: "В принципе, я думаю, что у вас возникают проблемы с пузырьковым событием. Если вы используете live(), jQuery добавит событие сейчас и в будущем. В следующий раз, когда вы добавите событие, оно будет добавлено в список ".

Я не уверен, как реализовать исправление или есть лучший подход.

  • 0
    они имеют те же идентификаторы, что и имена классов?
  • 0
    @ jp310 да, кроме "Мексика" имеет идентификатор Мексики
Теги:
checkbox

2 ответа

1
Лучший ответ

Хотя может возникнуть основная проблема с пузырьками событий (поскольку вы добавляете новую onClick() каждый раз, когда вызывается щелчок), я считаю, что вы неправильно атакуете проблему. Посмотрите на свой код:

$classname = $(this).attr('class');
if($('.' + $classname + ":checked").length > 0){
    $('#' + $classname).attr('checked','checked');
} else {
    $('#' + $classname).removeAttr('checked');
}

Эта часть захватывает имя текущего класса элемента и проверяет, проверено ли оно. Затем он находит элемент, идентификатор которого соответствует его собственному имени класса и либо проверяет, либо отменяет его. В вашем примере элемент, чей идентификатор является mexico, никогда не будет выбран, если ваш чекбокс CNC не имеет имени класса mexico. Кроме того, нигде в вашем коде вы не изменяете эти имена классов при изменении значения окна выбора выпадающего меню.

Я бы предположил, что если вы можете использовать HTML5, используйте предоставленную им функцию данных. Это позволит вам указать, какие элементы должны быть проверены без конфликтов или неправильных идентификаторов/имен классов.

Вот пример этого в действии: JSFiddle

JQuery в примере:

$('#work_direction').on('change', function() {
    if ($(this).val() == 'mexico') {
        $('.shop, .cnc').data('check', 'mexico');
    }
    else {
        $('.shop').data('check', 'shop');
        $('.cnc').data('check', 'cnc');
    }
});

$('.cad, .design, .shop, .cnc').on('change', function() {
    // Split into space-delimited array in case we want
    // to check off more than one
    var elemsToCheck = $(this).data('check').split(' ');
    var checked = $(this).attr('checked');
    $.each(elemsToCheck, function() {
        $('#' + this).attr('checked', !!checked);
    });
});

Мой пример также позволяет указать несколько data-check атрибуте data-check. Просто разделите каждый на пробел.

Поделиться
  • 0
    Вау, это круто. Это работает сейчас и буду ссылаться на это позже на другой странице. Спасибо, Нейт!
0

взгляните на событие change сочетании с функцией prop например, так

$('#work_direction').on('change' , function() {
    var direction = $(this).val();
    $('#'+direction).prop('checked', true);
});

http://jsfiddle.net/jFN5T/7/

Поделиться
  • 0
    Выглядит хорошо, но это проверяет Мексику (Джон Доу [7]), когда направление меняется на Мексику. Я ищу Мексику (Джон Доу [7]), чтобы проверить, когда Направление - Мексика, а ЧПУ или МАГАЗИН - внизу.
  • 0
    так в каком порядке пользователь нажимает на эти вещи? они выбирают направление, затем проверяют ЧПУ и / или МАГАЗИН. тогда он автоматически проверяет Джона Доу [7]? намерение не позволить пользователю нажимать чеки рядом с Джоном Доу [7] вручную? потому что в противном случае ЧПУ и магазин должны быть выше сотрудников для использования
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню