Question

作为在我的网站上防止机器人垃圾评论的另一种尝试，我想默认禁用提交按钮，让用户单击复选框以启用它。

这是我的代码：

<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">

enter image description here

这是fiddle。

我的问题是，如何使用Javascript或jQuery并考虑到跨浏览器兼容性？我遇到了各种解决方案，每个解决方案都存在问题。

理想情况下，如果用户未启用JS，则该按钮不会被禁用...如果您选择回答，请提供代码示例并更新fiddle。

Answer 1

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

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

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

FIDDLE

Answer 2

您在输入<input type="submit" value="Post Comment" id="submit" name="submit" disabled="disabled"/>

使用jquery脚本：

（文档）$。就绪（函数（）{

$（“。acceptance”）。bind（“click”，function（）{

if($(this).prop('checked')==true){ 

    $("#submit").removeAttr('disabled')   

}

else{

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

}

}）;

这是jsfiddle link

块引用

：

Answer 3

Pure 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"/>

JQUERY

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

在考虑交叉浏览器兼容性的情况下禁用和重新启用提交按钮

4 个答案: