我有这个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');
}
});
});
但是不管用。什么好主意吗?
当前回答
请参阅下面的代码以启用或禁用提交按钮
如果名称和城市字段有值，那么只有提交按钮将被启用。
<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>
其他回答
我们可以简单地使用if & else。如果你的输入是空的，我们可以有
if($(#name).val() != '') {
$('input[type="submit"]').attr('disabled' , false);
}
否则我们可以把false变成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);
}
});
});
这是一个活生生的例子
或者对于我们这些不喜欢用jQ处理每一件小事的人来说:
document.getElementById("submitButtonId").disabled = true;
我希望下面的代码能帮助到一些人!!：）
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*/
看看我项目中的这个片段
$("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
所以在你的操作执行后禁用按钮
(美元)。attr(“禁用”,“禁用”);
