Jquery

jQuery — атрибут disabled

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


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

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

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

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

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

Пример

Отключенная кнопка:

<button type=»button» disabled>Нажмите кнопку!</button>

Пример ввода

HTML-форма с отключенным полем ввода:

<form action=»/action_page.php»>   First name: <input type=»text» name=»fname»><br>   Last name: <input type=»text» name=»lname» disabled><br>   <input type=»submit» value=»Submit»> </form>

Пример optgroup

Отключенная опция-Группа:

<select>   <optgroup label=»German Cars» disabled>     <option value=»mercedes»>Mercedes</option>     <option value=»audi»>Audi</option>   </optgroup> </select>

Пример параметра

Раскрывающийся список с одним отключенным параметром:

<select>   <option value=»volvo» disabled>Volvo</option>   <option value=»saab»>Saab</option>   <option value=»vw»>VW</option>   <option value=»audi»>Audi</option> </select>

Выберите пример

Отключенный раскрывающийся список:

<select disabled>   <option value=»volvo»>Volvo</option>   <option value=»saab»>Saab</option>   <option value=»mercedes»>Mercedes</option>   <option value=»audi»>Audi</option> </select>

Пример текстового поля

Отключенная Текстовая область:

<textarea disabled> At html5css.ru you will learn how to make a website. We offer free tutorials in all web development technologies. </textarea>

HTML Tags

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Что такое DOM-свойства элементов?

Когда браузер получает HTML код запрашиваемой страницы, он разбирает его и строит в соответствии с ним DOM дерево. При этом HTML-теги становятся объектами (узлами этого дерева), а атрибуты – их свойствами. При этом отражение атрибутов в соответствующие им DOM-свойства не всегда осуществляется один к одному. Почему так происходит, а также более детально узнать про DOM-свойства и HTML-атрибуты, и их отличия друг от друга можно в этой статье.

Другими словами, свойства элементов – это то, что находится в DOM, а атрибуты – это то, что находится в HTML. Так как в JavaScript мы работаем со страницей через DOM, то в большинстве случаев более корректно взаимодействовать именно с DOM-свойствами, а использовать HTML-атрибуты только тогда, когда мы осознанно хотим что-то получить или изменить в HTML.

HTML Теги

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><menu><menuitem><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Disable or Enable Submit Button on Multiple Text Boxes


You can apply the above method on a form with multiple textboxes, that is you can disable or enable the submit button after making sure that all the fields (inputs) have values.

I’ll use the JavaScript disabled property in the script, inside a loop checking the type of input fields and also after checking the fields have values.

Disable or Enable Checkbox Depending upon Dropdown Selection using JavaScript and jQuery

Now, I have two input boxes calling a function using the onchange event.

The Code

&lthtml>
&lthead>
    &lttitle>Enable/Disable Submit Button based on Multiple Textbox values&lt/title>
&lt/head>
&ltbody>    
    &ltp>Enter some values in the text to Enable the Submit button!&lt/p>

    &ltp>Name: &ltinput type="text" id="name" placeholder="Enter your name" 
        onkeyup="manage(this)" />&lt/p>
    Designation: &ltinput type="text" id="desig" placeholder="Enter designation" 
        onkeyup="manage(this)" />

    &ltinput type="submit" id="submit" disabled />
&lt/body>

&ltscript>
    function manage(txt) {
        var bt = document.getElementById('submit');
        var ele = document.getElementsByTagName('input'); 

        
        for (i = 0; i // Check the element type
            if (ele.type == 'text' && ele.value == '') {
                bt.disabled = true;    
                return false;
            }
            else {
                bt.disabled = false;   
            }
        }
    }    
&lt/script>
&lt/html>

Try it

You can add more textboxes in your web page and check the code. Every time you add some text in the respective fields and switch focus on another field, it will raise the event onchange and call the function manage. This is where it will check if the textboxes have values or not and accordingly disable or enable the submit button.

Thanks for reading.

← PreviousNext →

Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Метод prop и removeProp

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

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

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

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

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

HTML Tags

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

Syntax

submitObject.disabled

The JavaScript disabled property is a boolean property that takes a true or false. Setting the property to true will enable the button (clickable) and setting it false (like bt.disabled = false;) will disable the button (un-clickable).

How to disable a button after the 1st click using a one-line code in JavaScript

Here’s what I am doing. I have two elements on my web page. A text box and a submit button. By default the submit button remains disabled. I’ll use the Input element’s disabled property to set it disabled (or un-clickable). When a user enters a value in the textbox, the script will enable (clickable) the submit button, else if the textbox is empty it will again disable the button.

The Markup and Script

&lthtml>
&ltbody>
    &ltinput type="text" id="txt" onkeyup="manage(this)" />
    &ltinput type="submit" id="btSubmit" disabled />
&lt/body>
&ltscript>
    function manage(txt) {
        var bt = document.getElementById('btSubmit');
        if (txt.value != '') {
            bt.disabled = false;
        }
        else {
            bt.disabled = true;
        }
    }


&lt/script>
&lt/html>

Try it

You can apply the same (above) script on an Input element of type button. For example,

&ltinput type="button" id="btSubmit" value="Submit" disabled />

The same script will work with the submit button as well as with the input button.


How to disable or enable a Submit Button using a simple jQuery Method

HTML Reference

HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts

HTML Tags

<!—> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> — <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

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

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

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

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

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

Например, добавим к кнопкам с пользовательское свойство , которое будем использовать для хранения количество нажатий (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="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>

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

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

Установка выбранного (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 у выбранного элемента
$('#mySelect option').eq(2).prop('selected',false);

jQuery — атрибут checked

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

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

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

<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').prop('disabled', true);
    } else {
      // скрыть сообщение об ошибки      
      $('#error-eula').css('display','none');
      // сделать доступной кнопку Зарегистрироваться для нажатия
      $('button').prop('disabled', false);
    }
  });
});
</script>

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

<!-- 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').eq(2).prop('checked',true);

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

});
</script>

HTML Reference

HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts

HTML Tags

<!—> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> — <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

Управление состоянием checked, disabled, selected через HTML-атрибуты

Изменять состояние checked, disabled, selected более предпочтительно через соответствующее DOM-свойство.

Но, тем не менее можно выполнять это и через HTML-атрибуты.

Например, чтобы перевести кнопку в неактивное состояние (disabled), ей нужно просто добавить HTML атрибут disabled .

Для выполнения обратного действия, перевода элемента в активное состояние у него нужно удалить этот атрибут:

Для управления состоянием checked , readonly необходимо выполнять аналогичные действия.


В приведённом выше примере мы добавляли и удаляли атрибут disabled у элемента. При этом браузер при изменении HTML кода элемента синхронизировал его с DOM, т.е. при добавлении HTML-атрибута disabled устанавливал соответствующему DOM-свойству в данном случае disabled значение true , а при удалении этого HTML-атрибута – устанавливал false .

Браузер также выполняет синхронизацию наоборот, т.е. при изменении DOM изменяет HTML код. Для DOM-свойств с логическим типом это работает так, с другими по-другому. Например, с id , class и style синхронизация происходит точь в точь, а например, с value синхронизация туда и обратно не работает.

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

Добрый день уважаемые знатоки. Хотел бы спросить у вас по поводу добавления атрибута disabled в кнопку Есть следующий код:

Идет считывание клика на кнопку, если значение в input = 0, то кнопке присваивается disabled. Каждая кнопка имеет свое id. Не совсем понимаю то, как добавить disabled нужной кнопки. Просто тупо не добавляется. Спасибо за помощь!

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Пользовательские DOM-свойства

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

По сути, DOM элементы (узлы) – это обычные объекты JavaScript. Следовательно, к ним, как и к любым другим объектам можно добавлять свои свойства.

Осуществляется это также с помощью метода . Данный метод используется, когда нужно добавить, изменить или прочитать пользовательское DOM-свойство.

Рассмотрим добавление собственного DOM-свойства к элементам на следующем примере.

В этом примере добавим к элементам пользовательское DOM-свойство , которое будем использовать для хранения количество нажатий (click-ов):

<button class="counter">Нажми на меня</button>
<button class="counter">Нажми на меня</button>
<button class="counter">Нажми на меня</button>

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

Пользовательские DOM-свойства не отображаются в HTML коде и ни каким образом не сказываются отрисовку этого элемента на странице.

Удаление пользовательского DOM-свойства у элемента осуществляется с помощью метода .

Синтаксис метода removeProp:

.removeProp( propertyName )
// propertyName (тип: Строка) - свойство, которое нужно удалить

Данный метод предназначен исключительно для удаления собственных DOM-свойств. Удалить стандартные (встроенные) DOM-свойства у элементов нельзя, вы можете им просто установить значение по умолчанию.

Пример, в котором будем добавлять и удалять у элемента пользовательское DOM-свойство при нажатии соответственно на ту или иную кнопку:

<p id="paragraph"></p>
<button id="add-custom-property">Добавить DOM-свойство myProp к элементу #paragraph</button>
<button id="remove-custom-property">Удалить DOM-свойство myProp у элемента #paragraph</button>
  
<script>
// при нажатию на кнопку с #add-custom-property
$('#add-сustom-property').click(function(){
  // добавим к элементу #paragraph свойство myProp
  $('#paragraph').prop('myProp', 'Этот текст является значением DOM-свойства myProp');
  // выведим в качестве контента элементв #paragraph значение свойства myProp
  $('#myParagraph').text($('#myParagraph').prop('myProp'));
});
// при нажатию на кнопку с #remove-custom-property
$('#remove-custom-property').click(function(){
  // удалим у элемента #paragraph свойство myProp
  $('#paragraph').removeProp('myProp');
  // вывести сообщение о том, что свойство myProp не существует
  if ($('body').prop('myProp') === undefined ) {
    $('#paragraph').text('У элемента нет DOM-свойства myProp!');
  }
});
</script>    

С этим читают