Question

在我的小程序中，我希望在我的密码匹配时启用一组单选按钮。我使用PHP从数据库中获取数据，同时循环HTML代码以创建单选按钮。下面是我的脚本代码和HTML代码。

JavaScript的：

function checkPass() {
    var pass1 = document.getElementById("pWord1"),
        pass2 = document.getElementById("pWord2"),
        role = document.getElementsByName("userRoles"),
        matchColor = "#66cc66",
        noMatchColor = "#ff6666";

    if (pass1.value === pass2.value){
        document.getElementById("msg").innerHTML ="Passwords match!";
        pass1.style.backgroundColor = matchColor;
        pass2.style.backgroundColor = matchColor;
        role.disabled = false;
    }else{
        document.getElementById("msg").innerHTML ="Passwords do not match!";
        pass1.style.backgroundColor = noMatchColor;
        pass2.style.backgroundColor = noMatchColor;
    }
}

HTML：

<label for="userRoles">User Role:</label><br>
<?php while ($row = $getUserRoleQuery -> fetch(PDO::FETCH_ASSOC)) { ?>
  <input type="radio" class="userRoles" name="userRoles" value="<?php echo $row["urId"]; ?>" disabled><?php echo $row["userRole"]; }?>
</div>

以上HTML / PHP代码将创建类似这样的内容，

<div id="userRoles">
<label for="userRoles">User Role:</label><br>
<input type="radio" class="userRoles" name="userRoles" value="1" disabled>Admin
<input type="radio" class="userRoles" name="userRoles" value="2" disabled>Manager
<input type="radio" class="userRoles" name="userRoles" value="3" disabled>Team Leader
<input type="radio" class="userRoles" name="userRoles" value="4" disabled>User
</div>

问题是我的javascript没有从单选按钮中删除disable属性。有人可以指出我正确的道路或向我展示我做得不对。

更新：解决了问题，感谢@JoYthi，现在我正在运行的JavaScript看起来像这样。

function checkPass() {
    var pass1 = document.getElementById("pWord1"),
        pass2 = document.getElementById("pWord2"),
        role = document.getElementsByName("userRoles"),
        matchColor = "#66cc66",
        noMatchColor = "#ff6666";

    if (pass1.value === pass2.value){
        document.getElementById("msg").innerHTML ="Passwords match!";
        pass1.style.backgroundColor = matchColor;
        pass2.style.backgroundColor = matchColor;

        for (var i = 0; i < role.length; i++){
            role[i].disabled = false;
        }

    }else{
        document.getElementById("msg").innerHTML ="Passwords do not match!";
        pass1.style.backgroundColor = noMatchColor;
        pass2.style.backgroundColor = noMatchColor;
    }
}

Answer 1

1）您需要for loop来禁用每个单选按钮。

2）如果用户密码匹配，你还需要在else部分启用disabled属性，删除disabled属性。再次，如果用户在密码字段中更改并且它不匹配意味着启用单选按钮，所以在这种情况下，您需要在其他部分禁用它。

$('#pWord1,#pWord2').on('keyup', function () {

    var pass1 = document.getElementById("pWord1"),
        pass2 = document.getElementById("pWord2"),
        role = document.getElementsByName("userRoles"),
        matchColor = "#66cc66",
        noMatchColor = "#ff6666";

    if (pass1.value === pass2.value){
        document.getElementById("msg").innerHTML ="Passwords match!";
        pass1.style.backgroundColor = matchColor;
        pass2.style.backgroundColor = matchColor;
       for (var i=0;  i < role.length; i++) {
        role[i].disabled = false;
        } 
    }else{
        document.getElementById("msg").innerHTML ="Passwords do not match!";
        pass1.style.backgroundColor = noMatchColor;
        pass2.style.backgroundColor = noMatchColor;
         for (var i=0;  i < role.length; i++) {
          role[i].disabled = true;
          } 
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
        <input type='text' id='pWord1'>
		<input type='text' id='pWord2'>
      <div id="userRoles">
            <label for="userRoles">User Role:</label><br>
            <input type="radio" class="userRoles" name="userRoles" value="1" disabled>Admin
            <input type="radio" class="userRoles" name="userRoles" value="2" disabled>Manager
            <input type="radio" class="userRoles" name="userRoles" value="3" disabled>Team Leader
            <input type="radio" class="userRoles" name="userRoles" value="4" disabled>User
        </div>
        <span id="msg"color="red" ></span>
    </div>

Answer 2

以下是使用JQuery的示例

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
        $('#text').change(function(){
            $('.userRoles').removeAttr('disabled');
        });  
        });
    </script>

    <div>
        <input type='text' id='text'>
      <div id="userRoles">
            <label for="userRoles">User Role:</label><br>
            <input type="radio" class="userRoles" name="userRoles" value="1" disabled>Admin
            <input type="radio" class="userRoles" name="userRoles" value="2" disabled>Manager
            <input type="radio" class="userRoles" name="userRoles" value="3" disabled>Team Leader
            <input type="radio" class="userRoles" name="userRoles" value="4" disabled>User
        </div>
    </div>

填写文本框时启用单选按钮组

2 个答案: