1
我试图禁用提交按钮，并勾选复选框时启用它。简单的例子适用于的jsfiddle禁用HTML表单提交按钮，启用勾选复选框
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>
有人看到我要去哪里错了吗？
感谢
UPDATE 感谢所有的建议，我现在已经尝试添加了$(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");
}
});
});//]]>
当我点击复选框打开或关闭，我得到e警报，告诉我if语句总是为false。任何想法为什么？
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>
'$（document）.ready（function（）{.... your jQuery ...}）;' - http://learn.jquery.com/about-jquery/how-jquery-works/#启动代码文件就绪 – gvee
你应该使用'prop'而不是'attr'''.prop（“disabled”，true）' – tymeJV