Событие Click влияет только на первый элемент jquery
Я пишу приложение, в котором пользователь выбирает, переключая кнопку переключателя, но событие click влияет только на первый элемент.
<label class="switch">
<input type="checkbox" id="block-instructors" class="block-instructors" value="FMmRXgApuo5AZe4zGqUl">
<span class="slider round"></span>
</label>
<label class="switch">
<input type="checkbox" id="block-instructors" class="block-instructors" value="J0jcK7eUvadzSNaaoG2h">
<span class="slider round"></span>
</label>
$("#block-instructors").on('change', function(e){
if ($(this).is(':checked')) {
$(this).attr('value');
alert($(this).val());
}
else {
$(this).attr('value', 'false');
alert($(this).val());
}
});

Ответы - Событие Click влияет только на первый элемент jquery / Click event affects only the first element jquery

16.11.2019 04:47:46
Вы не можете иметь один и тот же идентификатор для двух элементов на одной странице. Используйте это вместо этого
$(".block-instructors").on('change', function(e) {
if ($(this).is(':checked')) {
$(this).attr('value');
alert($(this).val());
} else {
$(this).attr('value', 'false');
alert($(this).val());
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" id="block-instructors" class="block-instructors" value="FMmRXgApuo5AZe4zGqUl">
<span class="slider round"></span>
</label>
<label class="switch">
<input type="checkbox" id="block-instructors" class="block-instructors" value="J0jcK7eUvadzSNaaoG2h">
<span class="slider round"></span>
</label>

16.11.2019 04:48:50
Использовать класс вместо идентификатора:
$(".block-instructors").on('change', function(e){

16.11.2019 04:50:53
Здесь вы определили несколько тегов с одинаковым идентификатором. Ваша функция jQuery начинает поиск идентификатора "block-instructors" и возвращает вам, где он находит первый в DOM. Вы должны преобразовать блок-инструкторы из идентификатора класса, а затем получить к нему доступ

16.11.2019 05:00:19
Вы должны иметь уникальный идентификатор для отдельного элемента или тега. Когда вы нажимаете на него, он ссылается на последний, так как код выполняется строка за строкой. Попробуйте этот код вместо этого.
$("#block-instructors1").on('change', function(e,value){
if ($(this).is(':checked')) {
$(this).attr('value');
alert($(this).val());
}
else {
$(this).attr('value', 'false');
alert($(this).val());
}
});
$("#block-instructors2").on('change', function(e,value){
if ($(this).is(':checked')) {
$(this).attr('value');
alert($(this).val());
}
else {
$(this).attr('value', 'false');
alert($(this).val());
}
});

16.11.2019 05:27:35
Чтобы выбрать первый элемент или любой из первых n-й элемент в jquery можно легко сделать с помощью: nth-child() селектор в jquery
Например для 2-го li в ul:
$("ul li:nth-child(2)")
Ссылку можно найти здесь