我有这个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');
}
});
});
但是不管用。什么好主意吗?
当前回答
上面的答案也没有处理基于菜单的剪切/粘贴事件的检查。下面是我用来做这两件事的代码。注意，动作实际上发生在超时时，因为剪切和过去事件实际上是在更改发生之前触发的，因此超时为更改的发生提供了一点时间。
$( ".your-input-item" ).bind('keyup cut paste',function() {
var ctl = $(this);
setTimeout(function() {
$('.your-submit-button').prop( 'disabled', $(ctl).val() == '');
}, 100);
});
其他回答
$(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");
}
}
它是这样工作的:
$('input[type="email"]').keyup(function() {
if ($(this).val() != '') {
$(':button[type="submit"]').prop('disabled', false);
} else {
$(':button[type="submit"]').prop('disabled', true);
}
});
确保在你的HTML中有一个“disabled”属性
登入表格:
<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);
}
});
});
问题是change事件仅在焦点从输入移开时触发(例如，有人单击输入或从输入中删除标签)。试着用keyup代替:
$(document).ready(function() {
$(':input[type="submit"]').prop('disabled', true);
$('input[type="text"]').keyup(function() {
if($(this).val() != '') {
$(':input[type="submit"]').prop('disabled', false);
}
});
});
要删除禁用的属性使用，
$("#elementID").removeAttr('disabled');
要添加禁用属性use，
$("#elementID").prop("disabled", true);
享受:)
