Question

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

但不是在我的模板中尝试（使用bootstrap等）。

我的模板有复选框

<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，仍然无效。更多信息：从一开始就没有禁用该按钮，所以也许我没有在功能中正确引用按钮？

UPDATE2 我已经尝试添加一个提醒，看看我的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");   

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

当我点击或关闭复选框时，我收到电子警报，告诉我if语句总是错误的。有什么想法吗？

UPDATE4 代码片段工作，只是不在我的页面中，警报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>

Answer 1

您的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>

这个片段对我来说很好。

<强>更新

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

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

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

    }
});

Answer 2

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

Have a little read of this：

在文档就绪上启动代码

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

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

不幸的是，在所有图片下载完毕之前，代码才会运行，包括横幅广告。要在文档准备好被操作后立即运行代码，jQuery会有一个称为就绪事件的语句：

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

Answer 3

确保在其他HTML后添加<script> 。或者你可以把它包装成：

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

如果用户使用键盘选中复选框，则应使用.change代替.click。

禁用html表单提交按钮，使用勾选的复选框启用

3 个答案: