我从 jsfiddle fork 了一些代码，当我将其放入 html 文档中时，它无法正常工作。但在 fiddle 上效果很好。有件事告诉我，我缺少一个库，但不确定应该使用哪个库。
如果它实际工作，应该发生的情况是禁用一个或两个文本框，然后在选择另一个单选按钮时启用。
Fiddle 可以在这里找到:http://jsfiddle.net/t5xKW/3/
如有任何帮助，我们将不胜感激。
<html>
<head>
<title> text conversion</title>
<script language="JavaScript">
var rbProject = document.getElementById('radio1-1');
var rbAccount = document.getElementById('radio1-2');
var txtRef = document.getElementById('txtRef');
var txtTitle = document.getElementById('txtTitle');
var txtName = document.getElementById('txtName');
rbProject.addEventListener('change', function (e) {
txtRef.disabled = false;
txtTitle.disabled = false;
txtName.disabled = true;
})
rbAccount.addEventListener('change', function (e) {
txtRef.disabled = true;
txtTitle.disabled = true;
txtName.disabled = false;
})
</script>
<style>
#container {
width:700px;
border-style:solid;
border-width:2px;
}
.table {
display:table;
width: 650px;
border-style:solid;
border-width:1px;
}
.tr {
display:table-row;
height:28px;
}
.td {
display:table-cell;
}
.td1 {
width:200px;
}
.td2 {
width:130px;
}
.td3 {
width:400px;
}
</style>
</head>
<body>
<div class="table">
<div class="tr">
<div class="td td1">
<input type="radio" name="section1a" id="radio1-1" value="radio" />
<label class="large black" for="radio1-1">Project</label>
</div>
<div class="td td2"> <span class="large black">Ref:</span>
</div>
<div class="td td3">
<input id="txtRef" class="form-textbox" name="ref" type="text" placeholder="Insert project reference" />
</div>
</div>
<div class="tr">
<div class="td td1"></div>
<div class="td td2"> <span class="large black">Title:</span>
</div>
<div class="td td3">
<input id="txtTitle" class="form-textbox" name="title" type="text" placeholder="Insert project title" />
</div>
</div>
<div class="tr">
<div class="td td1">
<input type="radio" name="section1a" id="radio1-2" value="radio" />
<label class="large black" for="radio1-2">Account</label>
</div>
<div class="td td2"> <span class="large black">Name:</span>
</div>
<div class="td td3">
<input id="txtName" class="form-textbox" name="name" type="text" placeholder="Insert account name" />
</div>
</div>
<div class="tr">
<div class="td td1">
<input type="radio" name="section1a" id="radio1-3" value="radio" />
<label class="large black" for="radio1-3">General Business</label>
</div>
<div class="td td2"></div>
<div class="td td3">
<input class="form-textbox" name="organization" type="text" placeholder="Insert client organisation name" />
</div>
</div>
</div>
</body>
</html>
最佳答案
在执行 JavaScript 之前，不会呈现 HTML。
将脚本放在关闭正文标记 ( </body> ) 之前:
<html>
<head>
<title> text conversion</title>
<style>
#container {
width:700px;
border-style:solid;
border-width:2px;
}
.table {
display:table;
width: 650px;
border-style:solid;
border-width:1px;
}
.tr {
display:table-row;
height:28px;
}
.td {
display:table-cell;
}
.td1 {
width:200px;
}
.td2 {
width:130px;
}
.td3 {
width:400px;
}
</style>
</head>
<body>
<div class="table">
<div class="tr">
<div class="td td1">
<input type="radio" name="section1a" id="radio1-1" value="radio" />
<label class="large black" for="radio1-1">Project</label>
</div>
<div class="td td2"> <span class="large black">Ref:</span>
</div>
<div class="td td3">
<input id="txtRef" class="form-textbox" name="ref" type="text" placeholder="Insert project reference" />
</div>
</div>
<div class="tr">
<div class="td td1"></div>
<div class="td td2"> <span class="large black">Title:</span>
</div>
<div class="td td3">
<input id="txtTitle" class="form-textbox" name="title" type="text" placeholder="Insert project title" />
</div>
</div>
<div class="tr">
<div class="td td1">
<input type="radio" name="section1a" id="radio1-2" value="radio" />
<label class="large black" for="radio1-2">Account</label>
</div>
<div class="td td2"> <span class="large black">Name:</span>
</div>
<div class="td td3">
<input id="txtName" class="form-textbox" name="name" type="text" placeholder="Insert account name" />
</div>
</div>
<div class="tr">
<div class="td td1">
<input type="radio" name="section1a" id="radio1-3" value="radio" />
<label class="large black" for="radio1-3">General Business</label>
</div>
<div class="td td2"></div>
<div class="td td3">
<input class="form-textbox" name="organization" type="text" placeholder="Insert client organisation name" />
</div>
</div>
</div>
<script>
var rbProject = document.getElementById('radio1-1');
var rbAccount = document.getElementById('radio1-2');
var txtRef = document.getElementById('txtRef');
var txtTitle = document.getElementById('txtTitle');
var txtName = document.getElementById('txtName');
rbProject.addEventListener('change', function (e) {
txtRef.disabled = false;
txtTitle.disabled = false;
txtName.disabled = true;
})
rbAccount.addEventListener('change', function (e) {
txtRef.disabled = true;
txtTitle.disabled = true;
txtName.disabled = false;
})
</script>
</body>
</html>
关于JavaScript 不工作，我不明白为什么，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30135899/