Гибкое jQuery отключение флажка для каждой строки таблицы

Question

Я не знаком с jQuery, поэтому я горжусь, что мне удалось заставить это работать: https://jsfiddle.net/bigjazzz/xvmjLda1/5/ (Щелчок по флажку Sick отключает другие входы.)

Однако мне было интересно, есть ли способ сделать его более гибким, чтобы, если я нажму PHOL N / R или Training, он также отключит все другие поля. В настоящее время я использую PHP l oop, чтобы вручную выводить каждый набор кода для каждой строки, так как у меня нет никакого представления, как сделать это l oop с помощью чисел. К каждой строке прикреплен класс «disableX».

Я видел селекторы .parent() и .child(), но я крутюсь, пытаясь придумать, как это реализовать. (Если честно, решение, вероятно, простое.)

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

Ура!

Answer 1

Назначьте новый класс трем флажкам, к которым вы хотите применить эту функцию. например, 'disableRow'

<input type="checkbox" name="phol2" class="disable2 disableRow">

(сделайте то же самое с двумя другими флажками).

Затем настройте функцию для использования этого нового класса:

$('input.disableRow').click(function() {
 //if the checkox is checked, find the ancetor row, then find all of the row's checkboxes
 if($(this).checked){
    $(this).ancestor('tr').find('input[type="checkbox"]').prop('checked', false);
//and get me checked too
  $(this).prop('checked', true);
  }
}

С помощью jQuery вы можете использовать любой селектор CSS, чтобы назначить функцию, которая будет запускаться при событии. Класс не обязательно должен использоваться в CSS.

. Вы можете использовать 3 отдельных атрибута id, но это чище и надежнее (например, если вы добавите новый флажок).