我有这个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');
}
});
});
但是不管用。什么好主意吗?
当前回答
提供各种类型的溶液。所以我想尝试一种不同的解决方案。简单地说，如果您在输入字段中添加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)
});
其他回答
埃里克，当用户输入文本然后删除所有文本时，你的代码似乎对我不起作用。如果有人遇到同样的问题，我创建了另一个版本。来吧，伙计们:
$('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 %>
问题是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);
}
});
});
禁用:$('输入(type = "提交"])。道具(“禁用”,真正的);
启用： $（'input[type=“submit”]'）.removeAttr（'disabled'）;
上面的enable代码比:
$('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>
