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