JQuery отключить / включить кнопку отправки


811

У меня есть этот HTML:

<input type="text" name="textField" />
<input type="submit" value="send" />

Как я могу сделать что-то вроде этого:

  • Когда текстовое поле пусто, отправка должна быть отключена (disabled = "disabled").
  • Когда что-то вводится в текстовое поле, чтобы удалить отключенный атрибут.
  • Если текстовое поле снова становится пустым (текст удаляется), кнопка отправки должна быть снова отключена.

Я попробовал что-то вроде этого:

$(document).ready(function(){
    $('input[type="submit"]').attr('disabled','disabled');
    $('input[type="text"]').change(function(){
        if($(this).val != ''){
            $('input[type="submit"]').removeAttr('disabled');
        }
    });
});

... но это не работает. Любые идеи?


2
Не используйте removeAttr ('отключено'), как это. Используйте prop () для переключения состояния. Смотрите мой ответ или официальную документацию .
basic6

Ответы:


1195

Проблема в том, что событие изменения срабатывает только тогда, когда фокус перемещается от входа (например, кто-то щелкает на входе или вкладках из него). Попробуйте вместо этого использовать keyup:

$(document).ready(function() {
     $(':input[type="submit"]').prop('disabled', true);
     $('input[type="text"]').keyup(function() {
        if($(this).val() != '') {
           $(':input[type="submit"]').prop('disabled', false);
        }
     });
 });

2
хорошо, но проблема в том, что когда я удаляю последнюю букву, мне нужно нажать еще раз, чтобы захватить пустой вал и отключить мою кнопку, потому что, когда я нажимаю клавишу backspace, чтобы удалить последнюю букву, мое поле все еще заполнено, поэтому мое нажатие клавиши захвачен, а затем письмо удаляется. так ... как я должен сделать это правильно?
kmunky

1
О, мои извинения за то, что я не тестировал код первым. Если вы замените нажатие клавиши на keyup, это поможет?
Эрик Палакович Карр

4
Что если вы измените значение поля без использования клавиатуры?
Натан

1
Это работает, но, кажется, пропустить CSS. Например, вызов $ ("# loginButton"). Button (); on input id="loginButton" type="submit" name="Submit" value="Login" disabled>покажет отключенную кнопку с отключенными классами css.
Gaʀʀʏ

39
Метод prop ('disabled', true) должен использоваться поверх метода attr ('disabled', 'disabled'). См. Документацию по prop ()
Мартин

129
$(function() {
  $(":text").keypress(check_submit).each(function() {
    check_submit();
  });
});

function check_submit() {
  if ($(this).val().length == 0) {
    $(":submit").attr("disabled", true);
  } else {
    $(":submit").removeAttr("disabled");
  }
}

4
трепло это работает! но ... хотя один вопрос ... вы можете объяснить это: $ (": text"). keypress (check_submit) .each (function () {check_submit ();}); спасибо
kmunky

1
Проблема с этим в том, что событие нажатия клавиши jQuery не всегда срабатывает при нажатии клавиш возврата или удаления. Это означает, что пользователь может отказаться от текста, и функция не будет вызвана, что является ошибкой UX. Я вижу keyup как средство, которое использует большинство людей. Мне это не совсем нравится; Я хочу, чтобы обратная связь происходила при нажатии клавиш, но это немного сложно осуществить.
BobRodes

79

Этому вопросу уже 2 года, но это все еще хороший вопрос, и это был первый результат Google ... но во всех существующих ответах рекомендуется установить и удалить атрибут HTML (removeAttr ("disabled")) "disabled", что не является правильный подход. Существует много путаницы в отношении атрибута против собственности.

HTML

«Отключено» в <input type="button" disabled>разметке называется логическим атрибутом W3C .

HTML против DOM

Quote:

Свойство находится в DOM; атрибут находится в HTML, который анализируется в DOM.

https://stackoverflow.com/a/7572855/664132

JQuery

Связанные с:

Тем не менее, самое важное, что нужно помнить о проверенном атрибуте, это то, что он не соответствует проверенному свойству. Атрибут фактически соответствует свойству defaultChecked и должен быть использован только для установки начального значения этого флажка. Проверенное значение атрибута не изменяется с состоянием флажка, в то время как проверяемое свойство изменяется. Таким образом, кросс-браузер-совместимый способ определить, установлен ли флажок, это использовать свойство ...

Соответствующие:

Свойства обычно влияют на динамическое состояние элемента DOM без изменения сериализованного атрибута HTML. Примеры включают свойство value элементов ввода, свойство disabled входов и кнопок или свойство флажка флажка. Метод .prop () должен использоваться для установки отключенного и отмеченного вместо метода .attr ().

$( "input" ).prop( "disabled", false );

Резюме

Чтобы [...] изменить свойства DOM, такие как [...] отключенное состояние элементов формы, используйте метод .prop () .

( http://api.jquery.com/attr/ )


Что касается отключения при изменении, то часть вопроса: есть событие под названием «вход», но поддержка браузера ограничена, и это не событие jQuery, поэтому jQuery не заставит его работать. Событие изменения работает надежно, но вызывается, когда элемент теряет фокус. Таким образом, можно объединить два (некоторые люди также слушают keyup и paste).

Вот непроверенный фрагмент кода, чтобы показать, что я имею в виду:

$(document).ready(function() {
    var $submit = $('input[type="submit"]');
    $submit.prop('disabled', true);
    $('input[type="text"]').on('input change', function() { //'input change keyup paste'
        $submit.prop('disabled', !$(this).val().length);
    });
});

1
Спасибо за эту информацию, но на самом деле не говорится, вызовет ли использование атрибута проблему, например, потерю кросс-браузерной совместимости. Вызывает ли проблема использование атрибута?
ChrisJJ

Проголосовано, но мне также было бы интересно узнать конкретные случаи, когда изменение атрибута приводит к проблемам, как упомянул @ChrisJJ.
Armfoot

40

Чтобы удалить отключенный атрибут, используйте

 $("#elementID").removeAttr('disabled');

и добавить отключенное использование атрибута,

$("#elementID").prop("disabled", true);

Наслаждаться :)


35

или для нас, которые не любят использовать jQ для каждой мелочи:

document.getElementById("submitButtonId").disabled = true;

55
Это здорово , что вы вегетарианец Javascript и все, но это не на самом деле ответить на этот вопрос вообще .
Мишель

6
Этот ответ, получивший 25 голосов, объясняет много дрянного кода, который существует во всем мире: /
o0 '.

26

Эрик, ваш код не работает для меня, когда пользователь вводит текст, а затем удаляет весь текст. Я создал другую версию, если кто-то испытывал такую ​​же проблему. вот вы, ребята

$('input[type="submit"]').attr('disabled','disabled');
$('input[type="text"]').keyup(function(){
    if($('input[type="text"]').val() == ""){
        $('input[type="submit"]').attr('disabled','disabled');
    }
    else{
        $('input[type="submit"]').removeAttr('disabled');
    }
})

14

Это будет работать так:

$('input[type="email"]').keyup(function() {
    if ($(this).val() != '') {
        $(':button[type="submit"]').prop('disabled', false);
    } else {
        $(':button[type="submit"]').prop('disabled', true);
    }
});

Убедитесь, что в вашем HTML есть атрибут «отключен»


12

Вот решение для поля ввода файла .

Чтобы отключить кнопку отправки для поля файла, когда файл не выбран, включите его после того, как пользователь выберет файл для загрузки:

$(document).ready(function(){
    $("#submitButtonId").attr("disabled", "disabled");
    $("#fileFieldId").change(function(){
        $("#submitButtonId").removeAttr("disabled");
    });
});

Html:

<%= form_tag your_method_path, :multipart => true do %><%= file_field_tag :file, :accept => "text/csv", :id => "fileFieldId" %><%= submit_tag "Upload", :id => "submitButtonId" %><% end %>

11

Вы также можете использовать что-то вроде этого:

$(document).ready(function() {
    $('input[type="submit"]').attr('disabled', true);
    $('input[type="text"]').on('keyup',function() {
        if($(this).val() != '') {
            $('input[type="submit"]').attr('disabled' , false);
        }else{
            $('input[type="submit"]').attr('disabled' , true);
        }
    });
});

вот живой пример


Это тот, который работает для меня. Я проверил вышеизложенное, но с ними возникли некоторые проблемы. Спасибо Сону!
Geeocode

10

Для формы авторизации:

<form method="post" action="/login">
    <input type="text" id="email" name="email" size="35" maxlength="40" placeholder="Email" />
    <input type="password" id="password" name="password" size="15" maxlength="20" placeholder="Password"/>
    <input type="submit" id="send" value="Send">
</form>

Javascript:

$(document).ready(function() {    
    $('#send').prop('disabled', true);

    $('#email, #password').keyup(function(){

        if ($('#password').val() != '' && $('#email').val() != '')
        {
            $('#send').prop('disabled', false);
        }
        else
        {
            $('#send').prop('disabled', true);
        }
    });
});

8

Если кнопка сама по себе является кнопкой в ​​стиле jQuery (с .button ()), вам необходимо обновить состояние кнопки, чтобы правильные классы добавлялись / удалялись после удаления / добавления атрибута disabled.

$( ".selector" ).button( "refresh" );

3
@The_Black_Smurf Я добавил это на случай, если это поможет кому-то в будущем - что в этом плохого?
Том Чемберлен

Ух ты. Грустно слышать, что автоматическое обновление jQuery здесь не работает. Спасибо!
ChrisJJ

7

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

$( ".your-input-item" ).bind('keyup cut paste',function() {
    var ctl = $(this);
    setTimeout(function() {
        $('.your-submit-button').prop( 'disabled', $(ctl).val() == '');
    }, 100);
});

6

Ваниль JS Solution. Это работает для всей формы, а не только один вход.

В вопросе выбран тег JavaScript.

Форма HTML:

var form = document.querySelector('form')
    var inputs = form.querySelectorAll('input')
    var required_inputs = form.querySelectorAll('input[required]')
    var register = document.querySelector('input[type="submit"]')
    form.addEventListener('keyup', function(e) {
        var disabled = false
        inputs.forEach(function(input, index) {
            if (input.value === '' || !input.value.replace(/\s/g, '').length) {
                disabled = true
            }
        })
        if (disabled) {
            register.setAttribute('disabled', 'disabled')
        } else {
            register.removeAttribute('disabled')
        }
    })
<form action="/signup">
        <div>
            <label for="username">User Name</label>
            <input type="text" name="username" required/>
        </div>
        <div>
            <label for="password">Password</label>
            <input type="password" name="password" />
        </div>
        <div>
            <label for="r_password">Retype Password</label>
            <input type="password" name="r_password" />
        </div>
        <div>
            <label for="email">Email</label>
            <input type="text" name="email" />
        </div>
        <input type="submit" value="Signup" disabled="disabled" />
    </form>

Некоторое объяснение:

В этом коде мы добавляем событие keyup в html-форму и при каждом нажатии клавиши проверяем все поля ввода. Если хотя бы одно имеющееся у нас поле ввода пустое или содержит только пробелы, мы присваиваем истинное значение отключенной переменной и отключаем кнопку отправки.

Если вам нужно отключить кнопку отправки, пока не будут заполнены все необходимые поля ввода - замените:

inputs.forEach(function(input, index) {

с:

required_inputs.forEach(function(input, index) {

где required_inputs - это объявленный массив, содержащий только обязательные поля ввода.


6

Мы можем просто иметь, если & еще. Если предположим, что ваш ввод пуст, мы можем иметь

if($(#name).val() != '') {
   $('input[type="submit"]').attr('disabled' , false);
}

иначе мы можем изменить ложь в истину


4

Отключить: $('input[type="submit"]').prop('disabled', true);

Включить: $('input[type="submit"]').removeAttr('disabled');

Приведенный выше код включения более точен, чем:

$('input[type="submit"]').removeAttr('disabled');

Вы можете использовать оба метода.


для включения просто используйте .prop ('disabled', false);
rahim.nagori

2

Мне пришлось немного поработать, чтобы это соответствовало моему случаю использования.

У меня есть форма, где все поля должны иметь значение перед отправкой.

Вот что я сделал:

  $(document).ready(function() {
       $('#form_id button[type="submit"]').prop('disabled', true);

       $('#form_id input, #form_id select').keyup(function() {
          var disable = false;

          $('#form_id input, #form_id select').each(function() {
            if($(this).val() == '') { disable = true };
          });

          $('#form_id button[type="submit"]').prop('disabled', disable);
       });
  });

Спасибо всем за ответы здесь.


2

Пожалуйста, смотрите код ниже, чтобы включить или отключить кнопку Отправить

Если поля «Имя» и «Город» имеют значение, то будет доступна только кнопка «Отправить».

<script>
  $(document).ready(function() {
    $(':input[type="submit"]').prop('disabled', true);

    $('#Name').keyup(function() {
      ToggleButton();
    });
    $('#City').keyup(function() {
      ToggleButton();
    });

  });

function ToggleButton() {
  if (($('#Name').val() != '') && ($('#City').val() != '')) {
    $(':input[type="submit"]').prop('disabled', false);
    return true;
  } else {
    $(':input[type="submit"]').prop('disabled', true);
    return false;
  }
} </script>
<form method="post">

  <div class="row">
    <div class="col-md-4">
      <h2>Getting started</h2>
      <fieldset>
        <label class="control-label text-danger">Name</label>
        <input type="text" id="Name" name="Name" class="form-control" />
        <label class="control-label">Address</label>
        <input type="text" id="Address" name="Address" class="form-control" />
        <label class="control-label text-danger">City</label>
        <input type="text" id="City" name="City" class="form-control" />
        <label class="control-label">Pin</label>
        <input type="text" id="Pin" name="Pin" class="form-control" />
        <input type="submit" value="send" class="btn btn-success" />
      </fieldset>
    </div>
  </div>
</form>


Просто чтобы быть разборчивым, разве вы не должны подождать (по крайней мере) второго символа, прежде чем активировать кнопку? ;-)
Крис Пинк

1

взгляните на этот фрагмент из моего проекта

 $("input[type="submit"]", "#letter-form").on("click",
        function(e) {
             e.preventDefault();


$.post($("#letter-form").attr('action'), $("#letter-form").serialize(),
                 function(response) {// your response from form submit
                    if (response.result === 'Redirect') {
                        window.location = response.url;
                    } else {
                        Message(response.saveChangesResult, response.operation, response.data);
                    }
});
$(this).attr('disabled', 'disabled'); //this is what you want

так что просто отключили кнопку после выполнения вашей операции

$(this).attr('disabled', 'disabled');


1

Все виды решения поставляются. Поэтому я хочу попробовать другое решение. Просто будет проще, если вы добавите idатрибут в поля ввода.

<input type="text" name="textField" id="textField"/>
<input type="submit" value="send" id="submitYesNo"/>

Теперь вот ваш jQuery

$("#textField").change(function(){
  if($("#textField").val()=="")
    $("#submitYesNo").prop('disabled', true)
  else
    $("#submitYesNo").prop('disabled', false)
});

-1

Надеюсь, приведенный ниже код поможет кому-то .. !!! :)

jQuery(document).ready(function(){

    jQuery("input[type=submit]").prop('disabled', true);

    jQuery("input[name=textField]").focusin(function(){
        jQuery("input[type=submit]").prop('disabled', false);
    });

    jQuery("input[name=textField]").focusout(function(){
        var checkvalue = jQuery(this).val();
        if(checkvalue!=""){
            jQuery("input[type=submit]").prop('disabled', false);
        }
        else{
            jQuery("input[type=submit]").prop('disabled', true);
        }
    });

}); /*DOC END*/
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.