Отключить / включить ввод с помощью jQuery?

$input.disabled = true;

или

$input.disabled = "disabled";

что стандартный путь? И, наоборот,как включить отключенный вход?

15 ответов


jQuery 1.6+

изменить disabled свойство вы должны использовать .prop()


просто ради новых конвенций и и сделать его адаптируемым вперед (если только все не изменится кардинально с ECMA6 (????):

$(document).on('event_name', '#your_id', function() {
    $(this).removeAttr('disabled');
});

и

$(document).off('event_name', '#your_id', function() {
    $(this).attr('disabled','disabled');   
});

    // Disable #x
    $( "#x" ).prop( "disabled", true );
    // Enable #x
    $( "#x" ).prop( "disabled", false );

иногда вам нужно отключить / включить элемент формы, например input или textarea. Jquery поможет вам легко сделать это, установив атрибут disabled в "disabled". Например:

  //To disable 
  $('.someElement').attr('disabled', '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();

Если вы просто хотите инвертировать текущее состояние (например, поведение кнопки переключения):

$("input").prop('disabled', ! $("input").prop('disabled') );

обновление для 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>

есть несколько способов, используя их, вы можете включить / отключить любой элемент :

подход 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.


отключить:

$('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.

я использовал ответ @gnarf и добавил его как функцию

   $.fn.disabled = function (isDisabled) {
     if (isDisabled) {
       this.attr('disabled', 'disabled');
     } else {
       this.removeAttr('disabled');
     }
   };

тогда используйте вот так

$('#myElement').disable(true);

2018, без JQuery (ES6)

отключить все input:

[...document.querySelectorAll('input')].map(e => e.disabled = true);

отключить input С id="my-input"

document.getElementById('my-input').disabled = true;

вопрос С JQuery, это просто к твоему сведению.


<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');

отключить true для типа ввода:

в случае определенного типа ввода (Ex. Ввод типа текста)

$("input[type=text]").attr('disabled', true);

для всех типов входных данных

$("input").attr('disabled', true);