javascript - Disabling and reenabling submit button with cross browser compatibility in mind

Question

As another attempt to prevent bot spam comments on my site, I want to disable the submit button by default and let the user click the checkbox to enable it.

Here is my code:

<label>
    <span class="notbot">
        <input type="checkbox" class="acceptance" value="1" name="iaccept">
    </span> I'm not a bot!
</label>

<input type="submit" value="Post Comment" id="submit" name="submit">

Here is a fiddle.

My question is, how can I do this using either Javascript or jQuery with cross browser compatibility in mind? I have come across various solutions with each having their issues.

Ideally a solution where if the user does not have JS enabled, then the button will not be disabled... If you choose to answer, please provide code example and update fiddle.

Answer 1

1. 您在输入中添加禁用的属性<input type="submit" value="Post Comment" id="submit" name="submit" disabled="disabled"/>

2. 使用 jquery 脚本：

   $(文档).ready(函数(){

   $(".acceptance").bind("点击", function(){

   if($(this).prop('checked')==true){ 
   
       $("#submit").removeAttr('disabled')   
   
   }
   
   else{
   
       $("#submit").prop('disabled', 'disabled'); 
   
   }
   

   });

});

这是jsfiddle 链接

块引用

：

Answer 2

在禁用 javascript 时启用提交按钮的 jQuery 解决方案，适用于大多数浏览器：

$('#submit').prop('disabled', true);

$('.acceptance').on('change', function() {
    $('#submit').prop('disabled', !this.checked);
});

小提琴

Answer 3

纯 Javascript 示例：我正在更改提交按钮的输入类型以保留论坛页面的外观

<form id="mainform" method="post" action="Default.aspx">
    <label>
        <span class="notbot">
            <input type="checkbox" class="acceptance" value="1" name="iaccept" />
        </span> I'm not a bot!
    </label>
    <br />
    <input type="submit" id="submit" name="submit" value="Post Comment" />
</form>

<script type="text/javascript" language="javascript">
    var submit = document.getElementById("submit");
    var iaccept_chkbox = document.getElementsByName("iaccept");

    if (iaccept_chkbox != null && iaccept_chkbox.length == 1) {
        submit.type = "button";
        iaccept_chkbox[0].onclick = function () {
            if (iaccept_chkbox[0].checked == true) {
                submit.type = "submit";
            }
        }
    }
</script>

http://jsfiddle.net/bbdEH/

Answer 4

HTML

        <label>
        <span class="notbot">
            <input type="checkbox" id="acceptance" value="1" name="iaccept"/>
        </span> I'm not a bot!
    </label>

    <input type="submit" value="Post Comment" id="submit" name="submit" disabled="disabled"/> 

查询

                    $("#acceptance").click(
                function() {
                $("#submit").attr("disabled", null);                        
                }
             );