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

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

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

HTML

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

HTML и DOM

Цитата:

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

https://stackoverflow.com/questions/5874652/prop-vs-attr

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для входа в систему:

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

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

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

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

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

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

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

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

Решение 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>

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

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

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

inputs.forEach(function(input, index) {

с:

required_inputs.forEach(function(input, index) {

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

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

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

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

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

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

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

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

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

поставляются 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)
});

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

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

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