$input.disabled = true;
или
$input.disabled = "disabled";
Какой стандартный способ? И, наоборот, как включить отключенный вход?
$input.disabled = true;
или
$input.disabled = "disabled";
Какой стандартный способ? И, наоборот, как включить отключенный вход?
Ответы:
Для изменения disabled
свойства вы должны использовать .prop()
функцию.
$("input").prop('disabled', true);
$("input").prop('disabled', false);
.prop()
Функция не существует, но .attr()
делает подобные:
Установите отключенный атрибут.
$("input").attr('disabled','disabled');
Чтобы снова включить, правильным методом является использование .removeAttr()
$("input").removeAttr('disabled');
Вы всегда можете положиться на реальный объект DOM и, вероятно, немного быстрее, чем другие два варианта, если вы имеете дело только с одним элементом:
// assuming an event handler thus 'this'
this.disabled = true;
Преимущество использования методов .prop()
or .attr()
заключается в том, что вы можете установить свойство для нескольких выбранных элементов.
Примечание: в 1.6 есть .removeProp()
метод, который звучит очень похоже removeAttr()
, но он НЕ ДОЛЖЕН ИСПОЛЬЗОВАТЬСЯ для нативных свойств, таких как 'disabled'
Excerpt из документации:
Примечание. Не используйте этот метод для удаления собственных свойств, таких как отмеченные, отключенные или выбранные. Это полностью удалит свойство и после удаления не может быть снова добавлено к элементу. Используйте .prop (), чтобы вместо этих свойств установить false.
На самом деле, я сомневаюсь, что есть много законных применений для этого метода, логические реквизиты выполняются таким образом, что вы должны установить их в false вместо того, чтобы «удалять» их как их «атрибутные» аналоги в 1.5
':input'
, а не только 'input'
. Последний выбирает только актуальные элементы <input>.
input,textarea,select,button
немного лучше использовать, чем :input
- :input
поскольку селектор довольно неэффективен, потому что он должен *
затем выбирать циклы по каждому элементу и фильтровать по тэгам - если вы передаете 4 селектора тэгов напрямую, это НАМНОГО быстрее. Кроме того, :input
он не является стандартным селектором CSS, поэтому возможное увеличение querySelectorAll
производительности потеряно
.removeProp("disabled")
было причиной проблемы «свойство полностью удалялось и не добавлялось снова», как указывалось @ThomasDavidBaker, в случае некоторых браузеров, таких как Chrome, тогда как на некоторых, как Firefox, оно работало нормально. Мы действительно должны быть осторожны здесь. Всегда используйте .prop("disabled",false)
вместо этого
Просто ради новых соглашений и обеспечения возможности адаптации в будущем (если только с ECMA6 (????) ничего не изменится):
$(document).on('event_name', '#your_id', function() {
$(this).removeAttr('disabled');
});
а также
$(document).off('event_name', '#your_id', function() {
$(this).attr('disabled','disabled');
});
$(document).on('event_name', '#your_id', function() {...})
вместо $('#your_id').on('event_name', function() {...})
. Как описано в документации jQuery .on (), первая использует делегирование и прослушивает все event_name
события, которые всплывают, document
и проверяет их на соответствие #your_id
. Последний слушает $('#your_id')
только события, и это лучше масштабируется.
// Disable #x
$( "#x" ).prop( "disabled", true );
// Enable #x
$( "#x" ).prop( "disabled", false );
Иногда вам нужно отключить / включить элемент формы, такой как input или textarea. Jquery поможет вам легко сделать это, установив для атрибута disabled значение «disabled». Например:
//To disable
$('.someElement').attr('disabled', 'disabled');
Чтобы включить отключенный элемент, необходимо удалить атрибут «отключенный» из этого элемента или очистить его строку. Например:
//To enable
$('.someElement').removeAttr('disabled');
// OR you can set attr to ""
$('.someElement').attr('disabled', '');
см .: http://garmoncheg.blogspot.fr/2011/07/how-to-disableenable-element-with.html
$("input")[0].disabled = true;
или
$("input")[0].disabled = false;
Вы можете поместить это где-то глобально в своем коде:
$.prototype.enable = function () {
$.each(this, function (index, el) {
$(el).removeAttr('disabled');
});
}
$.prototype.disable = function () {
$.each(this, function (index, el) {
$(el).attr('disabled', 'disabled');
});
}
И тогда вы можете написать что-то вроде:
$(".myInputs").enable();
$("#otherInput").disable();
prop
и не attr
с disabled
собственностью для того , чтобы правильно работать (при условии , JQuery 1.6 или выше).
attr
? Я использую приведенный выше код в некоторых проектах и, насколько я помню, он работает нормально
checked
свойство флажков. Использование attr
не даст тот же результат.
Есть много способов их использования, вы можете включить / отключить любой элемент :
Подход 1
$("#txtName").attr("disabled", true);
Подход 2
$("#txtName").attr("disabled", "disabled");
Если вы используете jQuery 1.7 или более позднюю версию, используйте prop () вместо attr ().
$("#txtName").prop("disabled", "disabled");
Если вы хотите включить какой-либо элемент, вам просто нужно сделать то, что вы сделали, чтобы отключить его. Однако jQuery предоставляет другой способ удалить любой атрибут.
Подход 1
$("#txtName").attr("disabled", false);
Подход 2
$("#txtName").attr("disabled", "");
Подход 3
$("#txtName").removeAttr("disabled");
Опять же, если вы используете jQuery 1.7 или более позднюю версию, используйте prop () вместо attr (). Вот это. Вот как вы можете включить или отключить любой элемент, используя jQuery.
Обновление для 2018 года:
Теперь нет необходимости в JQuery , и это было некоторое время , так document.querySelector
или document.querySelectorAll
(для нескольких элементов) делают почти точно такую же работу , как $, плюс более явными те getElementById
, getElementsByClassName
,getElementsByTagName
Отключение одного поля класса «input-checkbox»
document.querySelector('.input-checkbox').disabled = true;
или несколько элементов
document.querySelectorAll('.input-checkbox').forEach(el => el.disabled = true);
Вы можете использовать метод jQuery prop (), чтобы отключить или включить элемент формы или динамически управлять с помощью jQuery. Метод prop () требует jQuery 1.6 и выше.
Пример:
<script type="text/javascript">
$(document).ready(function(){
$('form input[type="submit"]').prop("disabled", true);
$(".agree").click(function(){
if($(this).prop("checked") == true){
$('form input[type="submit"]').prop("disabled", false);
}
else if($(this).prop("checked") == false){
$('form input[type="submit"]').prop("disabled", true);
}
});
});
</script>
Отключить:
$('input').attr('readonly', true); // Disable it.
$('input').addClass('text-muted'); // Gray it out with bootstrap.
Включить:
$('input').attr('readonly', false); // Enable it.
$('input').removeClass('text-muted'); // Back to normal color with bootstrap.
Отключить true для типа ввода:
В случае определенного типа ввода ( напр., Ввод типа текста )
$("input[type=text]").attr('disabled', true);
Для всех типов ввода
$("input").attr('disabled', true);
$("input[name=method]").prop('disabled', true);
это работает для меня
$("#values:input").attr("disabled",true);
$("#values:input").attr("disabled",false);
Я использовал ответ @gnarf и добавил его как функцию
$.fn.disabled = function (isDisabled) {
if (isDisabled) {
this.attr('disabled', 'disabled');
} else {
this.removeAttr('disabled');
}
};
Тогда используйте как это
$('#myElement').disable(true);
Подход 4 (это расширение ответа дикого кодера )
Используйте как это,
$( "#id" ).prop( "disabled", true );
$( "#id" ).prop( "disabled", false );
<html>
<body>
Name: <input type="text" id="myText">
<button onclick="disable()">Disable Text field</button>
<button onclick="enable()">Enable Text field</button>
<script>
function disable() {
document.getElementById("myText").disabled = true;
}
function enable() {
document.getElementById("myText").disabled = false;
}
</script>
</body>
</html>
В jQuery Mobile:
$('#someselectElement').selectmenu().selectmenu('disable').selectmenu('refresh', true);
$('#someTextElement').textinput().textinput('disable');
$('#someselectElement').selectmenu().selectmenu('enable').selectmenu('refresh', true);
$('#someTextElement').textinput('enable');