Html установка disabled через jquery. JQuery - установить значение атрибута
Возвращает или изменяет значение свойств выбранных элементов страницы (разница и связь между атрибутами и свойствами). Функция имеет четыре варианта использования:
возвращает значение атрибута propName у выбранного элемента. Если выбрано несколько элементов, то значение будет взято у первого. Метод возвращает значение undefined в случае, если на первый из выбранных элементов не установлено указанное свойство или набор выбранных элементов пуст.
во всех выбранных элементах, свойство propName примет значение value .
во всех выбранных элементах изменит значения группы свойств propName1, propName2, ... сделав их равными value1, value2, ... соответственно.
свойству propName будет присвоено значение, возвращенное пользовательской функцией (если она ничего не вернет, то свойство просто не изменит своего значения). Функция вызывается отдельно, для каждого из выбранных элементов. При вызове ей передаются следующие параметры: index — позиция элемента в наборе , value — текущее значение свойства propName у элемента.
Примеры использования:
Замечание 1 : важно отметить, что используя метод.prop(name) , вы получите значения свойства только для первого элемента из всех выбранных. Если вам нужны значения всех элементов, то следует использовать конструкции типа .map() или .each() .
Замечание 2 : в IE до 9 версии, использование prop для установки значений отличных от простых типов (число, строка, boolean) приводит к утечке памяти, если это свойство не будет удалено (с помощью .removeProp()) до удаления этого элемента из DOM. Поэтому, для установки собственных данных объектам DOM, лучше использовать .data() .
Замечание 3 : не используйте .removeProp() как аналог присвоения свойству значения false . Удалив нативное (родное, созданное программой, а не пользователем) свойство у DOM-объекта вы не сможете его потом вернуть.
Prop() удобен для работы с атрибутами, не требующими указания значений (checked и disabled в input-элементах), в большинстве других случаев, для работы с атрибутами лучше использовать .attr() .
В действииСделаем все флажки неактивными:
~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~style~gt~ img{padding:10px;} div{color:red; font-size:24px;} ~lt~/style~gt~ ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~input type="checkbox" checked /~gt~ ~lt~input type="checkbox" /~gt~ ~lt~input type="checkbox" /~gt~ ~lt~input type="checkbox" checked /~gt~ ~lt~script~gt~ $("input").prop({ disabled: true }); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~
Ссылки- Список всех функций для манипуляции с элементами страницы
Поисковые ключи:
- свойства элементов на странице
- значение свойства
- получить значение свойства
- изменить значение свойства
- установить значение свойства
- присвоить значение свойству
- .prop()
- prop()
У меня есть следующий HTML-код с двумя элементами, имеющими одно и то же имя
Через JQuery я хочу установить флажок enable. Итак, я использую что-то вроде этого:
$("#chk0").attr("disabled",false);
Но это не работает. Я предполагаю, что JQuery путается с двумя элементами с одинаковым именем. К сожалению, я не могу избежать использования двух разных имен, потому что, когда форма размещена, я хочу, чтобы все флажки были размещены (а не только те, которые были отмечены). Следовательно, я должен использовать скрытый элемент с тем же именем. Итак, вернемся к вопросу, как я могу включить флажок через JQuery в приведенном выше сценарии? Есть ли параметр "type" для attr, который отделяется от флажка?
6 ответов
Некоторые вещи до фактического кода.
хеш (#), который вы используете в качестве селектора, предназначен для идентификаторов, а не для имен элементов. также отключенный атрибут не является истинным ложным сценарием.. если он отключил атрибут, это значит, что это правда.. вам нужно удалить атрибут и не установить его в false. Также есть селектора форм, которые идентифицируют конкретные типы элементов в форме.
поэтому код будет
$("input:checkbox").removeAttr("disabled");
Приведение ответа в актуальное состояние
Вы должны использовать метод .prop() (добавленный после версии v1.6)
$("input:checkbox").prop("disabled", false); // to enable the checkbox
$("input:checkbox").prop("disabled", true); // to disable the checkbox
Серьезно, просто не используйте jQuery для этого. disabled - это логическое свойство элементов формы, которое отлично работает в каждом крупном браузере с 1997 года, и нет никакого способа, чтобы было проще или интуитивно изменить, отключен ли элемент формы.
И строка JavaScript, чтобы включить этот флажок:
Document.getElementById("chk0_checkbox").disabled = false;
Если вы предпочитаете, вместо этого вы можете использовать jQuery, чтобы установить флажок:
$("#chk0_checkbox").disabled = false;
"True" и "False" не работают, отключить, установить значение "отключено".
$(".someElement").attr("disabled", "disabled");
Чтобы включить, удалите.
$(".someElement").removeAttr("disabled");
Кроме того, не беспокойтесь о выборе нескольких элементов, jQuery будет работать на всех из них, которые соответствуют. Если вам нужен только один, вы можете использовать много вещей: во-первых,: последний, n-й и т.д.
Вы используете имя, а не id, как другое упоминание - помните, что если вы используете id valid xhtml, необходимо, чтобы идентификаторы были уникальными.
Иногда нужно сделать активными или неактивными текстовое поле, радиокнопки или чекбокс. Как сделать это динамически, не перезагружая страницу? Для этого можно использовать JavaScript и jQuery prop . HTML-элемент активируется путем установки свойства disabled в true .
С помощью jQuery можно выбрать элемент, который нужно включить или выключить, и изменить это свойство, используя функции prop() или attr() , в зависимости от того, какая версия jQuery применяется.
Функция prop() была добавлена в jQuery 1.6 и это стандартный метод для работы со свойствами. А функция attr() делает то же самое в jQuery 1.5 и ниже.
Также можно активировать или отключить любой элемент HTML , используя JavaScript . Все, что нужно, это найти элемент по id и установить его свойство disabled в true или false .
Как сделать активным/неактивным текстовое поле с помощью JavaScriptВ этом примере есть HTML-форма , текстовые поля и пара кнопок, чтобы делать текстовое поле активным или неактивным. Здесь я использую простой JavaScript , без jQuery prop checked .
Шаги будут следующими:
Вот пример HTML-файла c решением на основе JavaScript :
Как включать или выключать ввод с помощью JavaScript
Включение и выключение ввода с помощью JavaScript
Введите ваше имя:
Деактивировать текстовое поле
Активировать текстовое поле
function disable() {
document.getElementById("name").disabled = true;
}
function enable() {
document.getElementById("name").disabled = false;
}
При клике по кнопке «Деактивировать текстовое поле » вызывается функция disable() (не путайте с jQuery prop disabled ), и свойство disabled текстового поля устанавливается в true. Поэтому вы не можете больше вводить текст в это поле, оно не активно. При этом можно заново активировать текстовое поле, кликнув по кнопке «Активировать текстовое поле ». Она вызовет функцию enable() , которая сбросит свойство disabled в false .
Как включить/выключить текстовое поле с помощью jQuery?Ниже приведен код, основанный на jQuery , который делает то же самое. В этом примере мы использовали функцию prop() . Если вы пользуетесь версией jQuery 1.5 или старше, замените prop() на attr() .
Так же, как и в предыдущем примере, у нас есть две кнопки btn_enable и btn_disable , чтобы включать и выключать текстовое поле. Подключим, обработчик событий, используя функцию click() , которая вызывается при загрузке страницы.
В обработчике события мы находим текстовое поле с помощью селектора ID
в jQuery
, например, $(«#name»)
и затем вызываем prop(«disabled», false»)
, чтобы отключить это текстовое поле.
Когда пользователь нажимает кнопку «включить
», мы устанавливаем свойство disabled
в true
, вызывая jQuery prop(«disabled»
, true
). Это заново активирует текстовое поле. Помните, что нельзя ввести текст в отключенное поле.
Как включить или выключить текстовое поле с помощью jQuery
Включение и выключение текстового поля, используя jQuery
Введите ваше имя:
Выключить ввод
Включить ввод
$(document).ready(function() {
$("#btn_enable").click(function(){
$("#name").prop("disabled", false);
});
$("#btn_disable").click(function(){
$("#name").prop("disabled", true);
});
});
Можете протестировать это, запустив пример у себя в браузере. Только не вызывайте функцию removeProp() , чтобы заново включить кнопку. Она удалит атрибут «disabled » из текстового поля, поэтому нельзя будет снова его отключить в будущем. Вместо этого используйте метод jQuery prop disabled .
Вот скриншот того, как будет выглядеть страница в браузере вроде Edge или Chrome .
В этом примере мы отключили текстовое поле и заново включили его. Для этого можно использовать JavaScript или jQuery .
Перевод статьи “How to enable/disable an element using jQuery and JavaScript? Example ” был подготовлен дружной командой проекта .
Хорошо Плохо
Загрузка...
