Question

我写了一个html代码，向用户显示使用条款，但是我遇到了一个问题，我认为这是因为脚本问题。我在JSFIDDLE工具上尝试了我的代码，但它在我的浏览器中却没有。

我的代码：

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
<title>Terms of Use</title>
</head>
<body>
<form method="post" action="$PORTAL_ACTION$" class="login">
	<h1>Terms of Use</h1>
	<p class="login-p">
		To continue please read and accept the following terms.
	</p>
	<br>
	<textarea class="login-input" readonly>
1.plapla
2.plapla
3.plapla </textarea>
	<br>
	<textarea class="login-input" readonly>
1.plapla
2.plapla
3.plapla </textarea>
	<div>
		<input type="checkbox" name="option-1" id="option-1"><label for="option-1">Accept</label>
	</div>
	<div>
		<input type="submit" value="Continue" disabled>
	</div>
    <script type='text/javascript' src="http://code.jquery.com/jquery-latest.js">
var checkboxes = $("input[type='checkbox']"),
    submitButt = $("input[type='submit']");
checkboxes.click(function() {
    submitButt.attr("disabled", !checkboxes.is(":checked"));
}); 
    </script>
  
	<p class="footer">
		© 2015 Powered by <a href="http://www.tavit.aero">TAV-IT</a>.
	</p>
</form>
</body>
</html>

＆＃13;

问题是，当我选中复选框时，脚本应该禁用btn，但它不会:(

Answer 1

问题是您的内联脚本应该位于自己的<script>标记中。像这样（注意额外的关闭和打开脚本标签）：

<script type='text/javascript' src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    var checkboxes = $("input[type='checkbox']"),
        submitButt = $("input[type='submit']");
    checkboxes.click(function() {
        submitButt.attr("disabled", checkboxes.is(":checked"));
    }); 
</script>

请参阅this Plunker以查看修订后的版本。

Answer 2

访问DOM元素的JS代码应该在DOM就绪后运行，例如，

$(function() {
  var checkboxes = $("input[type='checkbox']")
    , submitButt = $("input[type='submit']")
    ;

  checkboxes.click(function() {
    submitButt.attr("disabled", !checkboxes.is(":checked"));
  });
});

并且应该包含在<script>标记中。

Answer 3

根据HTML5代码Link

的script指南

＆＃34;如果有src属性，则该元素必须为空或仅包含也与脚本内容匹配的脚本文档限制。＆＃34;

因此，<script>标记中的代码不应包含src属性。而是创建一个具有script属性的空src标记，然后创建新的script以添加您的脚本代码

<script type='text/javascript' src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    var checkboxes = $("input[type='checkbox']"),
        submitButt = $("input[type='submit']");
    checkboxes.click(function() {
        submitButt.attr("disabled", checkboxes.is(":checked"));
    }); 
</script>

html中的JScript未运行或被调用

3 个答案: