Как обратиться к элементу коллекции конкретным value?

Question

<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/

Answer 1

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

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

выбрать все чекбоксы которые входят .col
исключить текущий чекбокс
установить всем остальным елементам 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>

БЛОГ НА HUSL

Как обратиться к элементу коллекции конкретным value?

Ответы (1 шт):