Javascript 禁用html表单提交按钮，以选中复选框启用_Javascript_Html_Twitter Bootstrap_Button_Checkbox

Javascript 禁用html表单提交按钮，以选中复选框启用

javascript html twitter-bootstrap button checkbox

Javascript 禁用html表单提交按钮，以选中复选框启用,javascript,html,twitter-bootstrap,button,checkbox,Javascript,Html,Twitter Bootstrap,Button,Checkbox,我正在尝试禁用提交按钮，并在选中复选框时将其启用。这个简单的例子可以在JSFIDLE上使用但不是在我的模板中尝试时（使用引导等）我的模板有复选框 <input type="checkbox" id="checky"><a href="#">terms and conditions</a> $('#checky').click(function(){ if($(this).prop('checked')){ $('#post

我正在尝试禁用提交按钮，并在选中复选框时将其启用。这个简单的例子可以在JSFIDLE上使用

但不是在我的模板中尝试时（使用引导等）

我的模板有复选框

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

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

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

    }
});

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

//<![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");   

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

//

当我点击复选框on或off时，我会收到e警报，告诉我if语句总是false。你知道为什么吗

更新4 该代码段有效，只是不在我的页面中，始终执行警报2，而从不执行警报1 标题


创作者提交表格


//  

//

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

在文档准备就绪时启动代码

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

不幸的是，在下载完所有图像（包括横幅广告）后，代码才会运行。要在文档准备好进行操作时立即运行代码，jQuery有一个称为ready事件的语句：

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

确保在html的其余部分之后包含

。或者您可以将其包装为：

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

您还应该使用

.change

而不是

。如果用户使用键盘选中复选框，请单击。
$（文档）.ready（函数（）{……您的JQuery…}）-您还应该使用prop
而不是attr
-.prop（“已禁用”，true）
选中/取消选中使用键盘也会触发。单击。按下“对不起”假警报，按钮现在变灰，但在选中复选框时不启用checked@user1608058：您是否尝试脱机使用上述代码段？@user1608058:：我已将上述代码段上载到我的服务器。检查此链接。这个片段可以工作，它只是把它放在页面的其余部分，它不能。复选框和提交按钮位于表单中，这会导致问题吗？我唯一能想到的另一件事是django正在引发问题，但不太可能像我向if-else发出警报一样，只是它的评估结果总是错误的
<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>

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

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

<!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");   

    }
});

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