title: Enable button if radio button selected
body: <p>I've tried almost all the methods mentioned here and in other websites but still I'm stuck so that's why I'm asking it here.</p>
  
  <p>I've created a form (with out <code>&lt;form&gt;&lt;/form&gt;</code> tags) in this form I'm creating 4 radios buttons using a while loop data is being pulled from a database.</p>
  
  <p>To send data I'm using a JavaScript(Ajax) which is bound to a button click event.</p>
  
  <p>Now I want to keep the submit button disabled until all the filed's are filled the last filed's are the radio buttons I'm tried to use many other ways to do this but nothing happened so any way below is code I'm using.</p>
  
  <pre><code>    function checkUrole() {
      var roles = document.getElementById("userRoles"),
          btn = document.getElementById("submit"),
          len = roles.length,
          sel = null;
  
      for(var i=0; i &lt; len; i++){
          if (roles.checked){
              sel = roles[i].value;
          }
      }
      if (sel === null){
          document.getElementById("msgID").innerHTML = "9";
          btn.disabled = true;
      }else{
          btn.disabled = false;
      }
  }
  </code></pre>
  
  <p>And this is my HTML</p>
  
  <pre><code> &lt;label for="userRoles"&gt;User Role:&lt;/label&gt;&lt;br&gt;
          &lt;?php while ($row = $getUserRoleQuery -&gt; fetch(PDO::FETCH_ASSOC)) { ?&gt;
          &lt;input type="radio" id="userRoles" name="userRoles" value="&lt;?php echo $row["urId"]; ?&gt;" onmousedown="checkUrole()"&gt;&lt;?php echo $row["userRole"]; }?&gt;
          &lt;label id="msgID" hidden&gt;&lt;/label&gt;
          &lt;div id="msg"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Basically the HTML will create something like this,</p>
  
  <pre><code>&lt;input type="radio" id="userRoles" name="userRoles" value="1" onmousedown="checkUrole()"&gt;Admin
  &lt;input type="radio" id="userRoles" name="userRoles" value="2" onmousedown="checkUrole()"&gt;Manager
  &lt;input type="radio" id="userRoles" name="userRoles" value="3" onmousedown="checkUrole()"&gt;Team Leader
  &lt;input type="radio" id="userRoles" name="userRoles" value="4" onmousedown="checkUrole()"&gt;User
  </code></pre>
  
  <p>I don't like write a code like this,</p>
  
  <pre><code>if(document.getElementById("userRoles1").checked{
  something here;
  }else if(document.getElementById("userRoles2").checked{
  something here;
  }else{
  something here;
  }
  </code></pre>
  
  <p>above I think makes the program a bit less dynamic 'cos if a new user role is added I've add a new IF to the loop.</p>
  
  <p>So is there any way I solve this and I like to use JavaScript if can.</p>
  
  <p><strong>UPDATE:</strong> Thanks to @zer00ne I solved this problem and below is the finale working code hope this helps any one in the future as well.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;script language="JavaScript" type="text/javascript" src="../jScripts/userCreatFunctions.js"&gt;
  
  &lt;div id="userRoles"&gt;
     &lt;input type="radio" name="userRoles" value="1" checked&gt;Admin
     &lt;input type="radio" name="userRoles" value="2"&gt;Manager
     &lt;input type="radio" name="userRoles" value="3"&gt;Team Leader
     &lt;input type="radio" name="userRoles" value="4"&gt;User
  &lt;/div&gt;
  </code></pre>
  
  <p>My JaveScript:</p>
  
  <pre><code>$(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";
          }
      }
  });
  </code></pre>
  
  <p>Use the <code>$(document).ready(function () {})</code> other wise the script get loaded before the DOM which leads to a NULL value making the script none functional.</p>