1
<div class="col">
 <div class="field undecided">
    <input id="opt" type="checkbox" value="no" />
    <label for="opt">no</label>
  </div>
  <div class="field">
    <input id="opt1" type="checkbox" value="cat" />
    <label for="opt1">cat</label>
  </div>
  <div class="field">
    <input id="opt2" type="checkbox" value="dog" />
    <label for="opt2">dog</label>
  </div>   
  <div class="field">
    <input id="opt3" type="checkbox" value="hamster" />
    <label for="opt3">hamster</label>
  </div>  
  <div class="field">
    <input id="opt4" type="checkbox" value="rat" />
    <label for="opt4">rat</label>
  </div> 
</div>  

$(':checkbox').click(function(){        
    if ($(this).is(':checked')) {
            if ($(this)[0].defaultValue === 'no') {
                $(this).parents('.col').find('.field').addClass('disabled-answer');
                //$(this)[0].val('no').removeClass('disabled-answer');
        $('.undecided').removeClass('disabled-answer');
            }
        }       
        else {$(this).parents('.col').find('.field').removeClass('disabled-answer');}
});

При выборе значения "no" все опции, кроме самой "no" должны становиться неактивными. Была отключена при клике активность всех элементов, а затем "возвращена" для "no". Но обратиться к "no" получилось только присвоив дополнительный класс undecided. Обращение как элементу коллекции (например $(this)[0].val('no')) он распознает как все элементы коллекции. Хотелось бы узнать, как в таком случае правильно обращаться вторым способом.

https://jsfiddle.net/Nata_Hamster/sncwaL15/

1 ответ 1

3

Если все верно понял тот вот решение Вашего вопроса.

Этап выполнения:

  1. выбрать все чекбоксы которые входят .col
  2. исключить текущий чекбокс
  3. установить всем остальным елементам disabled если выбранный чекбокс равен значению 'no' иначе убираем disabled

При выборе любого чекбокса мы выбираем коллекцию всех чекбоксов и исключаем текущи

    $(':checkbox').click(function(){
           var n = $(this); 		
           n.closest('.col').find(':checkbox').not(n).prop('disabled', n.is(':checked') && n.val() === 'no');
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
 <div class="field undecided">
    <input id="opt" type="checkbox" value="no" />
    <label for="opt">no</label>
  </div>

  <div class="field">
    <input id="opt1" type="checkbox" value="cat" />
    <label for="opt1">cat</label>
  </div>  

  <div class="field">
    <input id="opt2" type="checkbox" value="dog" />
    <label for="opt2">dog</label>
  </div>   

  <div class="field">
    <input id="opt3" type="checkbox" value="hamster" />
    <label for="opt3">hamster</label>
  </div>   

  <div class="field">
    <input id="opt4" type="checkbox" value="rat" />
    <label for="opt4">rat</label>
  </div> 

</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.