當文本框填充時啓用單選按鈕集

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不刪除禁用屬性來自單選按鈕。有人能指出我走向正確的道路，還是告訴我我做得不對。

更新：解決了問題感謝@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）還需要啓用其他部分的禁用屬性，如果用戶密碼匹配則刪除禁用的屬性。再次如果用戶在密碼字段中更改，並且它不匹配意味着單選按鈕被啓用，所以在這種情況下，您需要在其他部分禁用它。

$('#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'> 
 
\t \t <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>