Отключить next/prev в начале/конце списка выбора

76
4

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

$(document).ready(function() {
$(".nextbutton").button({ disabled: true });
$('.dropdown').change(function() {
if (($('.dropdown').val() == 0) || ($('.dropdown').val() ==8)) {
$(".nextbutton").button({ disabled: true });
} else {
$(".nextbutton").button({ disabled: false });
}
});

Кнопка $ (". prevbutton"). ({disabled: true});

$('.dropdown').change(function() { if ($('.dropdown').val() < 2) { $(".prevbutton").button({ disabled: true }); } else { $(".prevbutton").button({ disabled: false }); } });

Он работает в моем коде, когда я делаю выделение из раскрывающегося списка, но когда я, например, выбираю вариант 2 и нажимаю кнопку рядом с последней опцией, он не работает. Моя демонстрация в скрипке

спросил(а) 2021-01-25T19:27:03+03:00 4 месяца, 3 недели назад
1
Решение
134

Проблема в том, что ваши кнопки не вызывают событие изменения в раскрывающемся списке (именно там вы устанавливаете статус отключенных/активированных кнопок).

Я изменил ваш JavaScript, чтобы кнопки "Далее" и "Предыдущий" запускали событие "change" для выпадающего меню; и немного изменили код в событии "change", чтобы учесть поведение, которое вы пытаетесь создать.

Вы можете играть с ним в JSFiddle здесь

Код ниже:

$(document).ready(function() {
$(".nextbutton").button({ disabled: true });

$('.dropdown').change(function() {
if ($('.dropdown').val() == 0) {
//If nothing is selected; only previous button is disabled
$(".prevbutton").button({ disabled: true });
} else if ($('.dropdown').val() == 1) {
//If the first option is selected; enabled the next button
$(".prevbutton").button({ disabled: true });
$(".nextbutton").button({ disabled: false });
} else if ($('.dropdown').val() == 8) {
//If the last option is selected disable the next button
$(".nextbutton").button({ disabled: true });
} else {
//Anywhere else we enable both buttons
$(".nextbutton").button({ disabled: false });
$(".prevbutton").button({ disabled: false });
}
});

$(".prevbutton").button({ disabled: true });
});

$("#next").click(function() {
var nextElement = $('#mylist > option:selected').next('option');
if (nextElement.length > 0) {
$('#mylist > option:selected').removeAttr('selected').next('option').attr('selected', 'selected');
//Trigger change to modify the status of the drop down/buttons
$('.dropdown').trigger('change');
}
});

$("#prev").click(function() {
var nextElement = $('#mylist > option:selected').prev('option');
if (nextElement.length > 0) {
$('#mylist > option:selected').removeAttr('selected').prev('option').attr('selected', 'selected');
//trigger change; to modify the status of the drop down/buttons
$('.dropdown').trigger('change');
}
});

ответил(а) 2021-01-25T19:27:03+03:00 4 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема