В этой статье рассмотрим, как добавить атрибут элементу с помощью jquery на сайте. Для примера, рассмотрим блокировку кнопки при добавлении ей атрибута disabled в зависимости от введенного числа в текстовое поле input.
Html разметка примера:
<input type="number" name="number" class="sum" value="" placeholder="Сумма" required>
<button type="submit" id="submit">Оплатить</button>
<button type="submit" id="submit">Оплатить</button>
Скрипт:
<script>
jQuery(function($) {
$('.sum').on( 'change keyup', function(){
let sum = $('.sum').val();
sum = sum < 1000 ? $('#submit').prop('disabled', true) : $('#submit').prop('disabled', false);
})
})
</script>
jQuery(function($) {
$('.sum').on( 'change keyup', function(){
let sum = $('.sum').val();
sum = sum < 1000 ? $('#submit').prop('disabled', true) : $('#submit').prop('disabled', false);
})
})
</script>
Демо - пример
В примере кнопка блокируется после добавления ей атрибута disabled, если введенное число меньше 1000. Если число больше, то атрибут disabled удаляется.Как проверить input на пустоту с помощью jquery, можно прочитать здесь.
