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

У меня есть этот 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');
        }
    });
});

... но это не работает. Есть идеи?

ОТВЕТЫ

Ответ 1

Проблема заключается в том, что событие изменения срабатывает только тогда, когда фокус удаляется от входа (например, кто-то нажимает на вход или вкладки из него). Вместо этого попробуйте использовать 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

$(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");
  }
}

Ответ 3

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

HTML

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

HTML и DOM

Цитата:

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

fooobar.com/questions/463/...

JQuery

по теме:

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

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

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

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

Резюме

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

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

Что касается функции "disable on change" вопроса: существует событие "input", но поддержка браузера ограничена, и это не событие jQuery, поэтому jQuery не будет работать. Событие изменения работает надежно, но запускается, когда элемент теряет фокус. Таким образом, можно было бы объединить эти два (некоторые люди также прослушивают клавиатуру и вставку).

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

$(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);
    });
});

Ответ 4

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

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

Ответ 5

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

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

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

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

Наслаждайтесь:)

Ответ 6

eric, ваш код, похоже, не работал у меня, когда пользователь вводит текст, а затем удаляет весь текст. Я создал другую версию, если кто-то испытал ту же проблему. здесь ya go folks:

$('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');
    }
})

Ответ 7

Здесь решение для поля ввода файла.

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

$(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 %>

Ответ 8

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

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

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

Ответ 9

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

$(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);
        }
    });
});

здесь Живой пример

Ответ 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);
        }
    });
});

Ответ 11

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

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

Ответ 12

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

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

Ответ 13

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

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

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

Ответ 14

Решение Vanilla JS. Работает на всю форму, а не только на одном входе.

В вопросе выбран тег 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>

Ответ 15

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

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

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

  $(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);
       });
  });

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

Ответ 16

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

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

<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>

Ответ 17

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

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

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

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

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

Ответ 18

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

 $("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');

Ответ 19

поставляются Al-типы решений. Поэтому я хочу попробовать другое решение. Просто будет проще, если вы добавите атрибут 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)
});

Ответ 20

Любой я де, чтобы включить и отключить ссылку с помощью кнопки?

Ответ 21

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

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*/