禁用 html 表单提交按钮，启用勾选复选框答案

【问题标题】：Disable a html form submit button, to enable with a ticked checkbox禁用 html 表单提交按钮，启用勾选复选框
【发布时间】：2025-12-31 10:15:16
【问题描述】：

我正在尝试禁用提交按钮，并在选中复选框时启用它。简单示例适用于 jsfiddle

http://jsfiddle.net/8YBu5/522/

但在我的模板中尝试时不会（使用引导程序等）。

我的模板有复选框

<input type="checkbox"  id="checky"><a href="#">terms and conditions</a>

然后是按钮

<input type="submit" value="Submit" id="submit" class="btn btn-success btn-lg btn-block">Submit</button>

然后是javascript。 javascript需要在顶部还是什么？

<script type="text/javascript">
    $('#submit').attr("disabled","disabled");

    $('#checky').click(function(){

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

        }
    });
    </script>

有人知道我哪里出错了吗？

谢谢

更新感谢所有建议，我现在尝试将 $(document).ready(function() { 添加到我的脚本开头并将 .attr 更改为 .prop ，仍然无法正常工作。更多信息：该按钮从一开始就没有被禁用，所以也许我没有在函数中正确引用该按钮？

更新2 我尝试添加警报以查看我的 javascript 是否正在运行，但警报没有显示，这意味着什么？

 <script type="text/javascript">
$(document).ready(function() { 
    alert("Welcome");
    $('submit').prop("disabled", true);
    $('checky').click(function(){
        if($(this).attr('checked') == true){
            $('submit').prop("disabled", false);
        }
        else {
            $('submit').prop("disabled", true);
        }
    });
});

UPDATE3 javascript 现在正在运行，我添加了两个警报，以查看正在执行的内容。

//<![CDATA[ 
$(window).load(function(){
$('#postme').attr("disabled","disabled");

$('#checky').click(function(){

    if($(this).attr('checked') == true){
        alert( "w" );   
         $('#postme').removeAttr("disabled");
    }
    else {
      alert( "e" );   
        $('#postme').attr("disabled","disabled");   

    }
});
});//]]>

当我打开或关闭复选框时，我会收到 e 警报，告诉我 if 语句总是错误的。任何想法为什么？

更新4 sn-p 有效，只是不在我的页面中，始终执行警报 2，从不警报 1 标题

<link href="/static/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

    <div class="container">


        <div class="row padding">
            <div class="col-md-12">
                <h1></h1>
            </div>
        </div>

        <div class="row padding">

            <form id="new_form" action="/page/" method="POST" >

              <div class="panel panel-success">
                <div class="panel-heading">
                  <h3 class="panel-title"></h3>
                </div>

                <div class="panel-body">
                  <div class="col-md-12"> 

                </div>
              </div>
            </div>

              <div class="panel panel-info">
                <div class="panel-heading">
                  <h3 class="panel-title">Creator submission form</h3>
                </div>

                <div class="panel-body">
                  <div class="col-md-12"> 

                  </div>
                </div>
              </div>
            <br>

               <input type="checkbox"  id="checky1">
               <input type="submit" id="postme1" value="submit">

                        </form>
        </div>

        <div class="row padding">
            <div class="col-md-12">

            </div>
        </div>              
    </div>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('#postme1').attr("disabled","disabled");

$('#checky1').click(function(){

    if($(this).attr('checked') == true){
         $('#postme1').removeAttr('disabled');
    }
    else {
        $('#postme1').attr("disabled","disabled");   
    }
});
});//]]>  

</script>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/static/js/bootstrap.min.js"></script>

<div class="container">
  <footer>
  <hr>

  </footer>
</div>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('#postme1').attr("disabled","disabled");

$('#checky1').click(function(){

    if($(this).attr('checked') == true){
      alert("1");
         $('#postme1').removeAttr('disabled');
    }
    else {
      alert("2");
        $('#postme1').attr("disabled","disabled");   

    }
});
});//]]>  

</script>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/static/js/bootstrap.min.js"></script>

</body>
</html>

【问题讨论】：

$(document).ready(function() { ....your JQuery... }); - learn.jquery.com/about-jquery/how-jquery-works/…
你也应该使用prop而不是attr -- .prop("disabled", true)

标签： javascript html twitter-bootstrap button checkbox

【解决方案1】：

JSFiddle 是一个可爱的资源。它所做的一件可爱的事情就是为您提供 JQuery 的包装器！

Have a little read of this:

在文档就绪时启动代码

为确保他们的代码在浏览器完成加载文档后运行，许多 JavaScript 程序员将他们的代码包装在一个 onload 函数中：

window.onload = function() {
    alert( "welcome" );     
}

很遗憾，在所有图片（包括横幅广告）下载完毕后，代码才会运行。为了在文档准备好被操作时立即运行代码，jQuery 有一个称为就绪事件的语句：

$( document ).ready(function() {
    // Your code here.     
});

【讨论】：

【解决方案2】：

你的javascript代码应该是

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('#postme').attr("disabled","disabled");

$('#checky').click(function(){

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

    }
});
});//]]>  

</script>


</head>
<body>
  <input type="checkbox"  id="checky"><a href="#">terms and conditions</a>
<input type="submit" id="postme" value="submit">

</body>


</html>

这个 sn-p 对我来说很好用。

更新

将此作为复选框的单击事件处理程序

$('#checky').click(function(){

    if($(this).prop('checked')){
         $('#postme').removeAttr('disabled');
    }
    else {
        $('#postme').attr("disabled","disabled");   

    }
});

【讨论】：

将
抱歉误报，该按钮现在显示为灰色，但在选中复选框时不启用
@user1608058：你是不是要离线使用上面的sn-p？
@user1608058 :: 我已经将上面的 sn-p 上传到我的服务器。检查此链接。 productdemos.net/test.html
这个 sn-p 工作，它只是把它放到页面的其余部分，它没有。复选框和提交按钮在表单内，这会导致问题吗？我能想到的唯一另一件事是 django 引起了问题，但不太可能，因为当我对它们出现的 if-else 发出警报时，它总是评估为假

【解决方案3】：

确保在 html 的其余部分之后包含您的 <script>。或者你可以把它包装起来：

$(document).ready(function() {
    // your code here
});

此外，您应该使用.change 而不是.click，以防用户使用键盘检查复选框。

【讨论】：

使用键盘检查/取消检查也会触发.click。