我有这个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');
}
});
});
但是不管用。什么好主意吗?
当前回答
登入表格:
<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);
}
});
});
其他回答
你也可以这样使用:
$(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);
}
});
});
这是一个活生生的例子
禁用:$('输入(type = "提交"])。道具(“禁用”,真正的);
启用： $（'input[type=“submit”]'）.removeAttr（'disabled'）;
上面的enable代码比:
$('input[type="submit"]').removeAttr('disabled');
两种方法都可以使用。
这个问题已经2年了，但它仍然是一个好问题，它是第一个谷歌结果，但所有现有的答案都建议设置和删除HTML属性(removeAttr("disabled"))“残疾”，这不是正确的方法。关于属性和属性有很多混淆。
HTML
标记中<input type="button" disabled>中的"disabled"被W3C称为布尔属性。
HTML与DOM
引用:
属性在DOM中;一个属性在HTML中，被解析成DOM。
https://stackoverflow.com/a/7572855/664132
jQuery
相关:
然而，关于checked属性要记住的最重要的概念是，它并不对应于checked属性。该属性实际上对应于defaultChecked属性，应该仅用于设置复选框的初始值。选中的属性值不会随着复选框的状态而改变，而选中的属性则会。因此，跨浏览器兼容的确定是否选中复选框的方法是使用属性。
相关:
属性通常影响DOM元素的动态状态，而不改变序列化的HTML属性。例如，输入元素的value属性，输入和按钮的disabled属性，或者复选框的checked属性。应该使用.prop()方法来设置禁用和检查，而不是使用.attr()方法。
$( "input" ).prop( "disabled", false );
总结
(…更改DOM属性，例如[…]]禁用状态，使用.prop()方法。
(http://api.jquery.com/attr/)
关于问题的disable on change部分:有一个名为“input”的事件，但浏览器支持有限，而且它不是jQuery事件，因此jQuery无法使其工作。change事件可靠地工作，但在元素失去焦点时触发。因此，人们可能会将两者结合起来(有些人还会听keyup和paste)。
下面是一段未经测试的代码来说明我的意思:
$(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);
});
});
如果按钮本身是一个jQuery样式的按钮(带有.button())，您将需要刷新按钮的状态，以便在删除/添加禁用属性后添加/删除正确的类。
$( ".selector" ).button( "refresh" );
$(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");
}
}
