У меня есть этот HTML:
<input type="text" name="textField" />
<input type="submit" value="send" />
Как я могу сделать что-то вроде этого:
Я попробовал что-то вроде этого:
$(document).ready(function(){
$('input[type="submit"]').attr('disabled','disabled');
$('input[type="text"]').change(function(){
if($(this).val != ''){
$('input[type="submit"]').removeAttr('disabled');
}
});
});
... но это не работает. Есть идеи?
Проблема заключается в том, что событие изменения срабатывает только тогда, когда фокус удаляется от входа (например, кто-то нажимает на вход или вкладки из него). Вместо этого попробуйте использовать 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 strong > (removeAttr ( "отключено" )) "отключено", что неверно. Существует много путаницы в отношении атрибута и свойства.
"Отключено" в <input type="button" disabled> в разметке называется булевым атрибутом W3C.
Цитата:
Свойство находится в DOM; атрибут находится в HTML, который анализируется в DOM.
по теме:
Тем не менее, самое важное понятие, которое нужно запомнить об проверяемом атрибуте, заключается в том, что оно не соответствует проверенному свойству. Атрибут фактически соответствует свойству defaultChecked, а должен использоваться только для установки начального значения этого флажка. Проверенное значение атрибута не изменяется с состоянием этого флажка, а свойство checked. Таким образом, совместимый с кросс-браузером способ определить, установлен ли флажок, - использовать свойство...
Соответствующие
Свойства обычно влияют на динамическое состояние элемента DOM без изменения сериализованного атрибута HTML. Примеры включают свойство значения входных элементов, свойство отключено входов и кнопок или проверенное свойство флажка. Метод .prop() следует использовать для установки отключенного и отмеченного вместо метода .attr().
$( "input" ).prop( "disabled", false );
Чтобы [...] изменить свойства DOM, такие как [...] отключенное состояние элементов формы, используйте . prop().
Что касается функции "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 %>
Это будет работать так:
$('input[type="email"]').keyup(function() {
if ($(this).val() != '') {
$(':button[type="submit"]').prop('disabled', false);
} else {
$(':button[type="submit"]').prop('disabled', true);
}
});
Убедитесь, что в вашем HTML есть атрибут "отключен"
вы также можете использовать что-то вроде этого:
$(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);
}
});
});
здесь Живой пример
Для входа в систему:
<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>Мне пришлось немного поработать, чтобы это соответствовало моему варианту использования.
У меня есть форма, где все поля должны иметь значение перед отправкой.
Вот что я сделал:
$(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);
});
});
Спасибо всем за их ответы здесь.
Пожалуйста, см. приведенный ниже код для включения или отключения кнопки отправки
Если поля "Имя" и "Город" имеют значение, будет включена только кнопка "Отправить".
<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> Disable: $('input[type="submit"]').prop('disabled', true);
Включить: $('input[type="submit"]').removeAttr('disabled');
Приведенный выше код включения более точен, чем:
$('input[type="submit"]').removeAttr('disabled');
Вы можете использовать оба метода.
взгляните на этот фрагмент из моего проекта
$("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)
});
Любой я де, чтобы включить и отключить ссылку с помощью кнопки?
Надеюсь, приведенный ниже код поможет кому-то.. !!! :)
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*/