Как отключить сгруппированные флажки, оставив включенным один?

Question

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

Однако решение не работает для меня, и я не могу понять, почему.

HTML

<label><input type="checkbox" name="js-frameworks" class="group"> JavaScript Frameworks Workshop — Tuesday 9am-12pm, $100</label>
<label><input type="checkbox" name="express" class="group"> Express Workshop — Tuesday 9am-12pm, $100</label>

Сценарий

$(".group").change(() => {
  console.log("hitting the check box");
  this.checked ? $("." + this.className).not(this).prop("disabled", true) : $("." + this.className).not(this).prop("disabled", false);
})

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

Answer 1

Единственное, о чем вам нужно было заботиться - это this не то, что вы ожидали в функциях стрелок . Преобразовать функцию стрелки в обычную функцию.

$(".group").change(function() {
  console.log("hitting the check box");
  this.checked ? $("." + this.className).not(this).prop("disabled", true) : $("." + this.className).not(this).prop("disabled", false);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="checkbox" name="js-frameworks" class="group"> JavaScript Frameworks Workshop — Tuesday 9am-12pm, $100</label>
<label><input type="checkbox" name="express" class="group"> Express Workshop — Tuesday 9am-12pm, $100</label>