jQuery - Атрибуты (свойства) disabled, checked и selected

Статья, в которой познакомимся с тем, как в jQuery управлять disabled, checked, selected и другими атрибутами (свойствами).

Методы jQuery (prop и removeProp) для работы со свойствами элементов

Атрибуты disabled, checked, selected, hidden, readonly и другие из этой серии относятся к группе логических атрибутов (свойств). Работа над значениями этих атрибутов в jQuery осуществляется с помощью метода prop.

Кроме этого метод prop используется не только для работы с системными свойствами, но также позволяет добавлять пользовательские свойства к элементам и удалять их при необходимости (с помощью метода removeProp). Создание, изменение и удаление пользовательских свойств рассмотрим ниже в соответствующем разделе этой статьи.

Методы prop и removeProp работают подобно методам attr и removeAttr, но в отличии от последних предназначены только для свойств.

Рассмотрим различие между обычными и логическими атрибутами.

Если у элемента присутствует логический атрибут (например, disabled), то это означает то, что он установлен (true) и при этом не важно, какое он имеет значение.

В соответствии со спецификацией HTML5 в качестве значения логических атрибутов (если это необходимо) желательно использовать пустую строку или его имя:

<!-- элементы button, у которых свойство disabled равно true -->
<button disabled>...</button>
<button disabled="">...</button>
<button disabled="disabled">...</button>

Кроме этого, согласно спецификации HTML не рекомендуется применять в качестве значений логических атрибутов true или false.

Если у элемента отсутствует логический атрибут (например, disabled), то это говорит о том, что он не установлен. Другими словами он имеет значение false.

<!-- элемент button, у которого свойство disabled равно false -->
<button>...</button>

Метод prop и removeProp

Метод prop предназначен для установления свойства (несколько свойств) каждому элементу текущего набора одним из следующих способов:

  • Устновить значение указанному свойству для элементов текущего набора:
    .prop('имя_свойства', значение);
    
  • Установить несколько свойств элементам:
    .prop({
     'имя_свойства1':значение,
     'имя_свойства2':значение
    });
    
  • Установка значения свойству с помощью функции:
    .prop('имя_свойства', function(index,prop){
      // аргументы функции и ключевое слово this
      // index - число, содержащее порядковый номер (индекс) элемента в наборе
      // prop - строка, содержащая текущее значение свойства
      // this - текущий элемент
    
      // содержимое функции
      // ...
    });

Метод removeProp предназначен для удаления указанного свойства у каждого элемента текущего набора. Данный метод необходимо использовать только для удаления пользовательских свойств, которые были установлены элементам DOM и объекту window. Метод removeProp нельзя использовать для встроенных (родных) свойств объектов, таких как disabled, checked, selected и др. Если вы хотите убрать атрибут (свойство) disabled, checked, selected или что-то подобное, то используйте метод prop и в качестве значения необходимого свойства используйте значение false.

// удаление пользовательских (нестандартных) свойств
.removeProp('имя_свойства');

//удаление родных (встроенных свойств)
.prop('имя_свойства',false);

jQuery - атрибут disabled

Добавление и удаление атрибута disabled в jQuery выполняется с помощью метода prop.

<!-- Кнопка -->
<button id="myBtn">Кнопка</button>
...
<script>
// установить disabled
$('#myBtn').prop('disabled',true);

// убрать disabled
$('#myBtn').prop('disabled',false);
</script>

Например, сделать кнопку submit активной, только в том случае, если что-то будет введено в поле input:

<form action="search.php">
  <input type="text" name="search">
  <input type="submit" value="Отправить">
</form>

<script>
// после загрузки страницы
$(function() {
  // установить кнопки свойство disabled, равное true (т.е. сделать её не активной)
  $('input[type="submit"]').prop('disabled', true);
  // при отпускании клавиши, проверить значение данного поля
  $('input[name="search"]').keyup(function() {
    // если значение не равно пустой строке
    if($(this).val() != '') {
      // то сделать кнопку активной (т.е. установить свойству disabled кнопки значение false             
      $('input[type="submit"]').prop('disabled', false);
    }
  });
});
</script>

jQuery - атрибут checked

Установление и снятие атрибута checked в jQuery осуществляется посредством метода prop.

<!-- Чекбокс -->
<input type="checkbox" name="agree" id="agree">
...
<script>
// добавить checked
$('#agree').prop('checked',true);
// убрать (remove) checked
$('#agree').prop('checked',false);
</script>

Например, проверить состояния кнопки checkbox в форме "Регистрация". Если оно имеет значение false, то отобразить сообщение и сделать недоступной кнопку для отправки данных формы на сервер.

<form action="register.php" method="post" autocomplete="off">
  ...

  <!-- Чекбокс -->
  <input name="eula_accepted" id="eula_accepted" type="checkbox" checked="checked">
  
  <label for="eula_accepted">Нажимая на кнопку "Зарегистрироваться", я принимаю условия Пользовательского соглашения</label>
  <div id="error-eula" style="display:none">Для продолжения вы должны принять условия Пользовательского соглашения</div>

  <!-- Кнопка регистрации -->
  <button type="submit">Зарегистрироваться</button>
</form>

<script>
// после загрузки страницы
$(function() {
  // при изменении чекбокса eula_accepted
  $('#eula_accepted').change(function(){
    // проверить состояние checkbox (если снят)
    if ($(this).prop('checked')==false) {
      // то отобразить сообщение о том, что вы должны принять условия пользовательского соглашения
      $('#error-eula').css('display','block');
      // сделать кнопку Зарегистрироваться не активной
      $('button[type="submit"]').prop('disabled', true);
    } else {
      // скрыть сообщение об ошибки      
      $('#error-eula').css('display','none');
      // сделать доступной кнопку Зарегистрироваться для нажатия
      $('button[type="submit"]').prop('disabled', false);
    }
  });
});
</script>

Рассмотрим пример, в котором выполним 2 операции над checkbox. Первое - это установим после загрузки страницы checked на нужный radio элемент (например, на 2). На 2 шаге создадим действие, которое будет выводить в консоль браузера, при изменении radio, значение выбранного (checked) переключателя:

<!-- radio элементы -->
<input type="radio" checked="checked" name="web-technology" value="HTML">
<label for="web-technology">HTML
<input type="radio" name="web-technology" value="CSS">
<label for="web-technology">CSS
<input type="radio" name="web-technology" value="JavaScript">
<label for="web-technology">JavaScript

<script>
// после загрузки страницы
$(function() {

  // установить checked на нужный radio (например, 2)
  $('input[name="web-technology"]').eq(2).prop('checked',true);

  // при изменении выбранного checkbox 
  $('input[name="web-technology"]').change(function(){
    // получить значение выбранного (checked) элемента
    var value = $('[name="web-technology"]:checked').val();
    // вывести его значение в консоль
    console.log(value);
  });

});
</script>

jQuery - Установить selected

Установка выбранного (selected) элемента выполняется с помощью метода prop.

Например, после загрузки страницы добавим свойство selected к последниму элементу:

<select id="mySelect">
  <option>Пункт 1</option>
  <option>Пункт 2</option>
  <option>Пункт 3</option>
</select>

<script>
// после загрузки страницы
$(function() {

  // изменим selected на последний элемент (с индексом 2)
  $('#mySelect option').eq(2).prop('selected',true);

});
</script>

Удаление selected у элемента осуществляется также как и других свойств (логических атрибутов), т.е. посредством присвоения данному свойству значения false.

// например, удалим свойство selected у выбранного элемента
$('#mySelect option').eq(2).prop('selected',false);

Работа с пользовательскими свойствами

Элемент DOM - это объект. Следовательно, он как и любой другой объект JavaScript может иметь пользовательские свойства.

jQuery позволяет добавлять пользовательские свойства к элементам DOM с помощью метода prop. Эти свойства можно будет прочитать только с помощью JavaScript (jQuery), т.к. другим способом их обнаружить не удастся. Кроме этого, они никак не сказываются при показе элементов на странице.

// добавить или изменить пользовательское свойство элементов, к которым применяется данный метод
.prop('имя_свойства', значение);

// удалить пользовательское свойство у элементов
.removeProp('имя_свойства');

Например, добавим к кнопкам с class="counter" пользовательское свойство count, которое будем использовать для хранения количество нажатий (click-ов):

<!-- Кнопки, каждая из которых будет иметь пользовательское свойство count -->
<button class="counter">Нажми на меня</button>
<button class="counter">Нажми на меня</button>
<button class="counter">Нажми на меня</button>

<script>
// после загрузки страницы
$(function(){
  // получить кнопки 
  var counters = $('.counter');
  // текст кнопки по умолчанию
  var defaultButtonText = 'Нажми на меня';
  // добавить свойство count к каждой кнопоке со значением 0
  counters.prop('count',0);
  // подписаться на событие click кнопок
  counters.click(function(){
    // this - кнопка, на которую нажали
    // получить количество нажатий (значение пользовательского свойства prop) текущей кнопки 
    var count = $(this).prop('count');
    // увеличить количество нажатий на 1 текущей кнопки
    count++;
    // сохранить данное значение в пользовательское свойство count данной кнопки
    $(this).prop('count',count);
    //вывести количество нажатий на кнопку
    $(this).text(defaultButtonText + ': ' + count);
  });
});
</script>

Рассмотрим ещё один пример, в котором создадим 2 кнопки и элемент p с id="myPargraph". С помощью первой кнопки будем добавлять нестандартное свойство myProp к элементу с id="myPargraph". Вторую кнопку будем использовать для удаления пользовательского свойства myProp у этого же элемента (id="myPargraph"). Кроме этого каждое действие будет заканчиваться тем, что выводить значение свойство myProp в содержимое элемента, имеющего id="myParagraph".

<p id="myParagraph"></p>
<button id="addCustomProperty">Добавить свойство myProp</button>
<button id="removeCustomProperty">Удалить свойство myProp</button>

<script>
// после загрузки страницы
$(function(){
  // при нажатию на кнопку с id="addCustomProperty"
  $('#addCustomProperty').click(function(){
    // добавить к элементу с id="myParagraph" свойство myProp
    $('#myParagraph').prop('myProp','Значение пользовательского свойства myProp');
    // вывести в элемент с id="myParagraph" значение свойства myProp
    $('#myParagraph').text($('#myParagraph').prop('myProp'));
  });
  // при нажатию на кнопку с id="removeCustomProperty"
  $('#removeCustomProperty').click(function(){
    // удалить у элемента с id="myParagraph" свойство myProp
    $('#myParagraph').removeProp('myProp');
    // вывести сообщение о том, что свойство myProp не существует
    if (typeof $('#myParagraph').prop('myProp')==='undefined') {
      $('#myParagraph').text('Пользовательское свойство myProp было удалено');
    }
  });
});
</script>

Управление логическими атрибутами с помощью attr

Кроме этого управлять логическими атрибутами (свойствами) HTML элементов disabled, checked, selected, hidden и другими можно также с помощью методов attr и removeAttr. Выполнять это следует в соответствии со спецификацией. Т.е. если у элемента есть логический элемент, то его значение равно true. А если нет, то false.

Например, выполним управление атрибутом disabled с помощью метода attr.

<button id="myBtn">Кнопка</button>

<script>
//получит элемент с id="myBtn"
myBtn = $('#myBtn');
//доабавить к кнопке атрибут disabled="disabled" 
myBtn.attr('disabled','disabled'); // disabled == true
//удалить у кнопке атрибут disabled
myBtn.attr('disabled',null); // disabled == false
</script>
Управление логическими атрибутами с помощью метода jQuery attr
Управление логическими атрибутами с помощью метода jQuery attr

Статья, которая может быть вам также интересной:

Работа с атрибутами HTML-элементов в jQuery с помощью методов attr и removeAttr.



   JavaScript и jQuery 1    1090 +1

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.