Nano Hash - криптовалюты, майнинг, программирование

jQuery включить/отключить флажок на основе выбора флажка

EDIT: я должен был объяснить, что во втором наборе флажков активируются только некоторые из них, в зависимости от того, что пользователь выбирает из первого набора — если пользователь выбирает первый флажок, то второй флажок во втором наборе. включен, тогда как если они выбирают второе поле в первом наборе, то включается другой набор флажков во втором наборе. Извиняюсь, надо было понятнее объяснить.

У меня есть две серии флажков следующим образом:

<input class="oDiv" type="checkbox" value="1" />
<input class="oDiv" type="checkbox" value="2" />

<input disabled="disabled" class="Spec" type="checkbox" value="1" />
<input disabled="disabled" class="Spec" type="checkbox" value="2" />
<input disabled="disabled" class="Spec" type="checkbox" value="5" /> 
<input disabled="disabled" class="Spec" type="checkbox" value="8" /> 
<input disabled="disabled" class="Spec" type="checkbox" value="10" />  
<input disabled="disabled" class="Spec" type="checkbox" value="30" />

У меня есть код jQuery, который включает второй набор флажков на основе выбора:

$('.oDiv').on('click', function() {
var select = $(this).val();

 if(select==1){
    $('.Spec:eq(1)').prop('disabled', false);
 }
     else{$('.Spec').prop('disabled', true);}
});

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

jsFiddle: http://jsfiddle.net/pvSeL/

Итак, чего я пытаюсь добиться, когда пользователь устанавливает флажок, соответствующие элементы включаются, а когда они снимают флажок, они становятся отключенными.

06.11.2013

  • Значение флажка не меняется. Но состояние checked меняется. Сравните с этим вместо значения флажка. 06.11.2013

Ответы:


1

Если вы хотите переключить флажок в зависимости от отмеченного состояния другого,

$('.oDiv').on('click', function() {
    var select = $(this).val();

     if(select==1) {
        $('.Spec:eq(4)').prop('disabled', !$(this).is(':checked'));
     }
});

jsFiddle


Чтобы обобщить этот процесс, вы можете сделать следующее:

$('.oDiv').on('click', function () {
    var enable = {
        1: [1, 2, 30],
        2: [5, 8, 10]
    };
    var val = $(this).val();
    var checked = $(this).is(':checked');
    enable[val] && enable[val].forEach(function (v) {
        console.log( $('.Spec[value="' + v + '"]'));
        $('.Spec[value="' + v + '"]')
            .prop('disabled', !checked);
    });
});

jsFiddle

06.11.2013
  • Это то, что я ищу! :-) 06.11.2013
  • Вы можете удалить оператор if, так как значение всегда будет 1. 06.11.2013
  • @Homer_J проверьте обновленную версию на наличие обобщенной версии. 06.11.2013

  • 2

    val() всегда будет возвращать 1 в вашем коде, так как он получает атрибут value от элемента, независимо от того, отмечен/выбран он или нет. Для этого вы можете использовать свойство checked собственного элемента DOM:

    $('.oDiv').on('click', function () {
        if (this.checked) {
            $('.Spec:eq(1)').prop('disabled', false);
        } else {
            $('.Spec').prop('disabled', true);
        }
    });
    

    Вы также можете использовать селектор :checked в jQuery.

    Обновленная скрипта


    Как это работает, если я хочу, чтобы был включен только второй набор флажков, если первый флажок равен 1, а затем другой набор, если флажок равен 2?

    Вам нужно поместить некоторую логику, чтобы проверить состояния обоих флажков, когда любой из них нажат. Что-то вроде этого:

    $('.oDiv').on('click', function () {
        var $checkboxes = $('.oDiv');
        $('.Spec').prop('disabled', true);
    
        if ($checkboxes.eq(0).prop('checked') && $checkboxes.eq(1).prop('checked')) {
            $('.Spec').eq(1).prop('disabled', false);
        }
        else if ($checkboxes.eq(0).prop('checked')){
            $('.Spec').eq(2).prop('disabled', false);
        } 
        else if ($checkboxes.eq(1).prop('checked')){
            $('.Spec').eq(3).prop('disabled', false);
        } 
    });
    

    Пример скрипта

    06.11.2013
  • $(this).is(':checked') никогда не требуется. Вместо этого используйте this.checked. 06.11.2013
  • Как это работает, если я хочу, чтобы был включен только второй набор флажков, если первый флажок равен 1, а затем другой набор, если флажок равен 2? 06.11.2013
  • @Homer_J, вам нужно установить логику, чтобы проверять состояния обоих флажков при нажатии на любой из них. 06.11.2013
  • @Homer_J смотрите мое обновление для рабочего примера этого 06.11.2013
  • Спасибо, Рори - да, имеет смысл - очень признателен. 06.11.2013

  • 3

    Для флажка val() всегда будет возвращать значение флажка, то есть значение, которое будет отправлено при его проверке и отправке формы. Чтобы проверить, установлен ли флажок, используйте

    $(this).prop('checked')
    

    or

    $(this).is(':checked')
    

    или просто

    this.checked
    

    См. также http://jquery-howto.blogspot.nl/2013/02/jquery-test-check-if-checkbox-checked.html для получения дополнительной информации и полезных советов.

    06.11.2013
  • Или, лучше, просто this.checked. 06.11.2013

  • 4

    Я немного пытаюсь понять, что вы хотите сделать. Но я думаю, вы, вероятно, захотите сделать что-то вроде этого:

    $('.oDiv').on('click', function () {
        var select = this.value; // get the value of the element clicked
    
        $('.Spec')
            .prop('disabled', true) // disable all .Spec checkboxes
            .eq(select)             // look at the checkbox with the position given
                                    // by select
                .prop('disabled', !this.checked); // set it to disabled or enabled
                                                  // depending on whether the box is
                                                  // checked
    });
    

    http://jsfiddle.net/lonesomeday/pvSeL/2/

    06.11.2013
    Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..