jQuery 表单接受复选框,禁用提交按钮
我有一个表单,仅在选中复选框时才启用提交按钮。问题是没有 JavaScript 的人将永远无法启用提交按钮。这个问题的最佳解决方案是什么?
<script src="http://www.lenticularpromo.com/v/vspfiles/js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#accept-box').click(function(){
$('#submitter').attr('disabled',!this.checked);
});
$('#myform').submit(function(){
return $('#accept-box').attr('checked');
});
});
</script>
<form id="myform" class="accept" action="http://dropbox.yousendit.com/KefengXu11610470" method="GET">
<label>I promise to include all required information along with my artwork submission</label>
<input id="accept-box" name="accept" type="checkbox" value="0">
<br>
<input id="submitter" class="submit" type="submit" name="submit" value="Continue to artwork upload" disabled="disabled">
</form>
I have a form which enables the submit button only when a checkbox is selected. The problem is that people without JavaScript will never be able to enable the submit button. What is the best solution to this problem?
<script src="http://www.lenticularpromo.com/v/vspfiles/js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#accept-box').click(function(){
$('#submitter').attr('disabled',!this.checked);
});
$('#myform').submit(function(){
return $('#accept-box').attr('checked');
});
});
</script>
<form id="myform" class="accept" action="http://dropbox.yousendit.com/KefengXu11610470" method="GET">
<label>I promise to include all required information along with my artwork submission</label>
<input id="accept-box" name="accept" type="checkbox" value="0">
<br>
<input id="submitter" class="submit" type="submit" name="submit" value="Continue to artwork upload" disabled="disabled">
</form>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
在我看来,最好的选择是在 HTML 中启用提交按钮并使用 JavaScript 禁用它。然后在服务器端验证该复选框是否已被选中(即使您在客户端进行验证,也应该始终在服务器端进行验证,JavaScript 可以被禁用或绕过)。
In my opinion, the best option would be to keep the submit button enabled in the HTML and disable it using the JavaScript. And then validate on the server-side that the checkbox has been checked (you should always validate server-side even if you do client-side, JavaScript can be disabled or bypassed).
不要在标记中对
disabled
属性进行硬编码。相反,通过 javascript/jquery 添加该属性。这样,如果你没有 JS,它就永远不会被禁用,但如果你有 JS,你的逻辑就会应用。当然,您需要在服务器端进行跟进,因为现在您可以禁用 JS 来满足“复选框单击”按钮的要求。
Don't hardcode the
disabled
attribute in your markup. Instead, add that attribute via javascript/jquery. That way, if you do not have JS, it is never disabled, but if you do have JS, your logic applies.You'll want to follow up on the server side, of course, since now you can just disable JS to get past the "checkbox click" button requirement.
最好的方法是告诉他们启用 JS 或仅在服务器端检查这一点。
甚至谷歌也这样做。
the best way is to tell them to enable the JS or check this only on server side.
even google does that.
您可以使用
You can use <noscript> tags on the page to display a special message for users who do not have javascript enabled. Tell them the site will not perform ideally without js, then do your validation on the server.