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

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

750
20 окт. '09 в 17:21
источник поделиться
20 ответов

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

$(document).ready(function() {
     $(':input[type="submit"]').prop('disabled', true);
     $('input[type="text"]').keyup(function() {
        if($(this).val() != '') {
           $(':input[type="submit"]').prop('disabled', false);
        }
     });
 });
1101
20 окт. '09 в 17:26
источник

Связанные вопросы


Похожие вопросы

$(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");
  }
}
121
20 окт. '09 в 17:23
источник

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

HTML

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

HTML и DOM

Цитата:

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

qaru.site/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);
    });
});
74
25 сент. '14 в 12:32
источник

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

document.getElementById("submitButtonId").disabled = true;
37
10 июля '13 в 6:57
источник

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

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

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

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

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

35
22 янв. '15 в 13:15
источник

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');
    }
})
25
25 нояб. '09 в 22:52
источник

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

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

$(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 %>
12
20 нояб. '12 в 19:33
источник

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

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

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

11
14 марта '18 в 7:52
источник

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

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

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

11
10 июля '13 в 7:09
источник

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

<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
03 окт. '17 в 19:08
источник

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

$( ".selector" ).button( "refresh" );
8
02 марта '15 в 15:25
источник

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

$( ".your-input-item" ).bind('keyup cut paste',function() {
    var ctl = $(this);
    setTimeout(function() {
        $('.your-submit-button').prop( 'disabled', $(ctl).val() == '');
    }, 100);
});
7
01 янв. '15 в 20:48
источник

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

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

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

5
22 февр. '18 в 16:15
источник

Решение 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 - это объявленный массив, содержащий только обязательные поля ввода.

3
18 нояб. '18 в 23:38
источник

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

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

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

  $(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
25 авг. '16 в 13:41
источник

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

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

<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>
2
11 апр. '17 в 12:52
источник

поставляются 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)
});
1
26 апр. '17 в 9:29
источник

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

 $("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
27 сент. '16 в 9:59
источник

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

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

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

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

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

1
24 мая '19 в 12:47
источник

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

0
27 марта '19 в 19:21
источник

Посмотрите другие вопросы по меткам или Задайте вопрос