我已经尝试了几乎所有这里提到的方法和其他网站，但我仍然被卡住了，这就是我在这里问的原因。
我已经在这个表单中创建了一个表单（带有<form></form>个标签），我正在使用从数据库中提取的while循环数据创建4个无线电按钮。
发送数据我正在使用绑定到按钮点击事件的JavaScript（Ajax）。
现在我想保持提交按钮被禁用，直到所有文件都填满了最后一个字段是单选按钮我试图用很多其他方法来做到这一点但没有发生任何事情，所以下面的任何方式是我正在使用的代码
function checkUrole() {
var roles = document.getElementById("userRoles"),
btn = document.getElementById("submit"),
len = roles.length,
sel = null;
for(var i=0; i < len; i++){
if (roles.checked){
sel = roles[i].value;
}
}
if (sel === null){
document.getElementById("msgID").innerHTML = "9";
btn.disabled = true;
}else{
btn.disabled = false;
}
}
这是我的HTML
<label for="userRoles">User Role:</label><br>
<?php while ($row = $getUserRoleQuery -> fetch(PDO::FETCH_ASSOC)) { ?>
<input type="radio" id="userRoles" name="userRoles" value="<?php echo $row["urId"]; ?>" onmousedown="checkUrole()"><?php echo $row["userRole"]; }?>
<label id="msgID" hidden></label>
<div id="msg"></div>
基本上HTML会创建这样的东西，
<input type="radio" id="userRoles" name="userRoles" value="1" onmousedown="checkUrole()">Admin
<input type="radio" id="userRoles" name="userRoles" value="2" onmousedown="checkUrole()">Manager
<input type="radio" id="userRoles" name="userRoles" value="3" onmousedown="checkUrole()">Team Leader
<input type="radio" id="userRoles" name="userRoles" value="4" onmousedown="checkUrole()">User
我不喜欢写这样的代码，
if(document.getElementById("userRoles1").checked{
something here;
}else if(document.getElementById("userRoles2").checked{
something here;
}else{
something here;
}
我认为如果添加一个新的用户角色，会使程序的动态性降低。我会在循环中添加一个新的IF。
所以我有什么方法可以解决这个问题，如果可以，我喜欢使用JavaScript。
更新：感谢@ zer00ne我解决了这个问题，下面是最终的工作代码，希望这对未来的任何人都有帮助。
我的HTML：
<script language="JavaScript" type="text/javascript" src="../jScripts/userCreatFunctions.js">
<div id="userRoles">
<input type="radio" name="userRoles" value="1" checked>Admin
<input type="radio" name="userRoles" value="2">Manager
<input type="radio" name="userRoles" value="3">Team Leader
<input type="radio" name="userRoles" value="4">User
</div>
我的JaveScript：
$(document).ready(function () {
/*Register the change element to #roles
|| When clicked...*/
//This code base was originally developed by zer00ne I'm using it under his permission
//Thanks man.
var form = document.getElementById('userRoles');
if (form){
form.addEventListener('change', function(e) {
/* Determine if the e.target (radio that's clicked)
|| is NOT e.currentTarget (#roles)
*/
if (e.target !== e.currentTarget) {
// Assign variable to e.target
var target = e.target;
// Reference the submit button
var btn = document.querySelector('[name=submit]');
// Enable submit button
btn.disabled = false;
// call rolrDist() passing the target,value
roleDist(target.value);
}
}, false);
}
function roleDist(rank) {
var display = document.getElementById("msg");
if (rank !== null) {
display.innerHTML = "All done! You can save";
} else {
display.innerHTML = "Please Select User Type";
}
}
});
在DOM之前使用$(document).ready(function () {})脚本加载，导致NULL值，使脚本无效。
答案 0 :(得分：2)
首先，在每个输入元素上都不需要id。您可以使用getElementsByName按名称获取按钮元素的数组，下面是一个示例，说明如何基于其中一个被检查来执行“某事”：
JS （使用ES6）
const getRadioValue = (name) => {
const radios = document.getElementsByName(name);
let val;
Object.keys(radios).forEach((obj, i) => {
if (radios[i].checked) {
val = radios[i].value;
}
});
return val;
}
document.getElementById('form').addEventListener('change', (e) => {
getRadioValue('userRoles'); // value of checked radio button.
});
<强> HTML
<div id="form">
<input type="radio" name="userRoles" value="1">Admin
<input type="radio" name="userRoles" value="2">Manager
<input type="radio" name="userRoles" value="3">Team Leader
<input type="radio" name="userRoles" value="4">User
</div>
更有效的方法是使用Array.prototype.find()方法，这更好，因为：
find方法对数组的每个索引执行一次回调函数，直到找到一个回调返回true值的回调函数。如果找到这样的元素，find会立即返回该元素的值。
换句话说，一旦我们找到了我们希望它返回的内容，它就不需要迭代整个Array。
注意：使用上述change事件中的以下代码段来检索选中的值。
JS （使用ES6）
const getCheckedRadioValue = (name) => {
const radios = document.getElementsByName(name);
try {
// calling .value without a "checked" property will throw an exception.
return Array.from(radios).find((r, i) => radios[i].checked).value
} catch(e) { }
}
getCheckedRadioValue('userRoles');
JS （没有ES6）
function getCheckedRadioValue(name) {
var radios = document.getElementsByName(name);
var val;
for (var i = 0, len = radios.length; i < len; i++) {
if (radios[i].checked) {
val = radios[i].value;
break;
}
}
return val; // return value of checked radio or undefined if none checked
}
getCheckedRadioValue('userRoles');
<强>参考
答案 1 :(得分：1)
不完全确定你要做什么，所以这就是我猜的：
需要确定已检查无线电输入的值
需要启用由已检查的电台确定的提交按钮
需要有效地调用其他功能，运行其他交互等，具体取决于具体检查的内容。
详细信息在Snippet
中注释<强>段
// Reference #roles
var form = document.getElementById('roles');
/* Register the change element to #roles
|| When clicked...
*/
form.addEventListener('change', function(e) {
/* Determine if the e.target (radio that's clicked)
|| is NOT e.currentTarget (#roles)
*/
if (e.target !== e.currentTarget) {
// Assign variable to e.target
var target = e.target;
// Find the textNode next to target
var label = target.nextSibling;
// Reference the #display
var display = document.getElementById('display');
// Display the <label>s text and radio value
display.value = label.textContent + ' - Rank: ' + target.value;
// Reference the submit button
var btn = document.querySelector('[type=submit]');
// Enable submit button
btn.disabled = false;
// call rolrDist() passing the target,value
roleDist(target.value);
}
}, false);
function roleDist(rank) {
switch (rank) {
case '4':
alert('Rank 4 - Limited Access');
// Take user to landing page
break;
case '3':
alert('Rank 3 - Basic Access');
// Take user to dashboard
break;
case '2':
alert('Rank 2 - Advanced Access');
// Take user to database
break;
case '1':
alert('Rank 1 - Full Access');
// Take user to admin panel
break;
}
}input,
output,
[type=submit] {
font: inherit;
cursor: pointer;
}
[type=submit] {
float: right;
}<form id='roles'>
<input type="radio" name="role" value="1">Admin
<input type="radio" name="role" value="2">Manager
<input type="radio" name="role" value="3">Team Leader
<input type="radio" name="role" value="4">User
</form>
<br/>
<label for='display'>Role: </label>
<!--
Since #display and submit button are outside of
the <form>, using the form attribute and the
<form>'s #id as the value establishes an
association between them and <form>
-->
<output id='display' form='roles'></output>
<br/>
<input type='submit' form='roles' disabled>
答案 2 :(得分：0)
你的标记中存在非常基本的错误你不应该在
中使用具有相同id 的元素您可以使用class而不是id（将类提供给radioboxes ）
document.getElementsByClassName（ “的UserRole”）
<input type="radio" class="userRoles" name="userRoles" value="1" onmousedown="checkUrole()">Admin
其余的代码似乎没问题