в 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');
}
});
});
... но это не работает. Есть идеи? Спасибо.
17 ответов
проблема в том, что событие изменения срабатывает только тогда, когда фокус перемещается от входа (например, кто-то щелкает по входу или вкладкам из него). Попробуйте использовать keyup вместо:
$(document).ready(function() {
$(':input[type="submit"]').prop('disabled', true);
$('input[type="text"]').keyup(function() {
if($(this).val() != '') {
$(':input[type="submit"]').prop('disabled', false);
}
});
});
$(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-код атрибут (removeAttr ("отключено"))" отключено", что не является правильным подходом. Существует много путаницы в отношении атрибута и свойства.
HTML-код
"инвалида" в <input type="button" disabled>
в разметке называется логический атрибут by консорциум W3C.
HTML против DOM
цитата:
свойство в дом; атрибут в HTML, разбор в дом.
https://stackoverflow.com/a/7572855/664132
в jQuery
по теме:
тем не менее, самое важное понятие, которое нужно помнить о проверяемом атрибуте, - это то, что он не соответствует проверяемому свойству. Этот атрибут фактически соответствует свойству defaultChecked и следует использовать только для установки начального значения флажка. Значение атрибута checked не изменяется в зависимости от состояния флажка, в то время как свойство checked изменяется. Таким образом, кросс-браузер совместимый способ определить, если установлен флажок Использовать собственность...
актуальность:
свойства обычно влияют на динамическое состояние DOM элемент без изменения сериализованного атрибута HTML. Примеры включают свойство value входных элементов отключен собственность входов и кнопок, или свойство checked флажка. The .метод prop () должен использоваться для установки отключено и проверено вместо.буква attr() метод.
$( "input" ).prop( "disabled", false );
резюме
для [...] измените свойства DOM, такие как [...] отключено состояние элементов формы, используйте .prop () метод.
что касается отключения при изменении части вопроса: есть событие под названием "Вход", но поддержка браузера ограничена и это не событие jQuery, поэтому jQuery не заставит его работать. Событие изменения работает надежно, но запускается, когда элемент теряет фокус. Таким образом, можно объединить два (некоторые люди также слушают keyup и паста.)
здесь непроверенный кусок кода, чтобы показать, что я имею в виду:
$(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;
снять использовать атрибут disabled,
$("#elementID").removeAttr('disabled');
и добавить использовать атрибут disabled,
$("#elementID").prop("disabled", true);
наслаждайтесь :)
Эрик, ваш код, похоже, не работает для меня, когда пользователь вводит текст, а затем удаляет весь текст. я создал другую версию, если кто-то испытал ту же проблему. здесь я идти люди:
$('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);
}
});
});
здесь видео
если кнопка сама кнопка в стиле 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);
});
для входа в форму:
<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);
}
});
});
он будет работать следующим образом:
$('input[type="email"]').keyup(function() {
if ($(this).val() != '') {
$(':button[type="submit"]').prop('disabled', false);
} else {
$(':button[type="submit"]').prop('disabled', true);
}
});
убедитесь,что в вашем HTML
мы можем просто иметь if & else .если предположим, что ваш вход пуст, мы можем иметь
if($(#name).val() != '') {
$('input[type="submit"]').attr('disabled' , false);
}
иначе мы можем изменить false на true
мне пришлось немного поработать, чтобы это соответствовало моему прецеденту.
У меня есть форма, где все поля должны иметь значение перед отправкой.
вот что я сделал:
$(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);
});
});
спасибо всем за ответы здесь.
пожалуйста, см. ниже код, чтобы включить или отключить кнопку
Если поля Name и City имеют значение, то будет включена только кнопка Submit.
<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>
взгляните на этот фрагмент из моего проекта
$("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');
типы 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)
});