locked
How to enable a button, only if all radiobuttons are checked RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1528845285 posted

    How to enable a button, only if all radiobuttons are checked?

    <div class="col-sm-2>
  <button class="textButton" id="next" disabled>Next</button>
</div>

    I have 7 questions each with a yes/no radiobuttons.

    Tuesday, June 5, 2018 8:05 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-441616027 posted

    I think this will work:

    <input type="radio" name="name1" value="Yes" />Yes
    <input type="radio" name="name1" value="No" />No
    <br/>

    <input type="radio" name="name2" value="Yes" />Yes
    <input type="radio" name="name2" value="No" />No

    <br/>
    <input type="radio" name="name3" value="Yes" />Yes
    <input type="radio" name="name3" value="No" />No

    <div class="col-sm-2">
    <button class="textButton" id="next" disabled>Next</button>
    </div>

    var names = [];
    var checkedcount = 0;
    $("input[type='radio']").each(function(){
    if(names.length == 0){
    names.push($(this).attr("name"));
    }
    else if(!names.includes($(this).attr("name")))
    {
    names.push($(this).attr("name"));
    }
    });
    $("input[type='radio']").click(function(){
    if($(this).prop("checked"))
    {
    checkedcount++;
    if(checkedcount == names.length)
    {
    $(".textButton").attr("disabled", false);
    alert("diffradio = " + checkedcount);
    }
    }
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 8, 2018 8:16 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User2103319870 posted

    You can try with below code

    <!DOCTYPE html>
<html>
<head>

<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script>
    $(document).ready(function () {
      $(":radio").change(function() {
          var names = {};
          $(':radio').each(function() {
              names[$(this).attr('name')] = true;
          });
          var count = 0;
          $.each(names, function() { 
              count++;
          });
          if ($(':radio:checked').length === count) {
             $("#next").prop( "disabled", false );
          }
      }).change();
      
    });
  </script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body >
    <input type="radio" name="r1" value="Yes" />Yes
    <input type="radio" name="r1" value="No" />No
   <br/>
    
    <input type="radio" name="r2" value="Yes" />Yes
    <input type="radio" name="r2" value="No" />No
  
    <br/>
    <input type="radio" name="r3" value="Yes" />Yes
    <input type="radio" name="r3" value="No" />No
  
  <div class="col-sm-2">
  <button class="textButton" id="next" disabled>Next</button>
</div>
</body>
</html>

    Source URL

    Wednesday, June 6, 2018 1:57 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User61956409 posted

    Hi bthHum,

    bthHum

    How to enable a button, only if all radiobuttons are checked?

    I have 7 questions each with a yes/no radiobuttons.

    You can also refer to the following code snippet to detect&check the number of checked radiobuttons and dynamically enable button.

    <script>
    $(function () {
        $("input[type='radio']").change(function () {
            var checkednum = parseInt($("input[type='radio']:checked").length);

            if (checkednum == 7) {
                $("#next").prop('disabled', false);
            } else {
                $("#next").prop('disabled', true);
            }
        })
    })
</script>

    With Regards, 

    Fei Han

    Wednesday, June 6, 2018 2:03 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-441616027 posted

    I think this will work:

    <input type="radio" name="name1" value="Yes" />Yes
    <input type="radio" name="name1" value="No" />No
    <br/>

    <input type="radio" name="name2" value="Yes" />Yes
    <input type="radio" name="name2" value="No" />No

    <br/>
    <input type="radio" name="name3" value="Yes" />Yes
    <input type="radio" name="name3" value="No" />No

    <div class="col-sm-2">
    <button class="textButton" id="next" disabled>Next</button>
    </div>

    var names = [];
    var checkedcount = 0;
    $("input[type='radio']").each(function(){
    if(names.length == 0){
    names.push($(this).attr("name"));
    }
    else if(!names.includes($(this).attr("name")))
    {
    names.push($(this).attr("name"));
    }
    });
    $("input[type='radio']").click(function(){
    if($(this).prop("checked"))
    {
    checkedcount++;
    if(checkedcount == names.length)
    {
    $(".textButton").attr("disabled", false);
    alert("diffradio = " + checkedcount);
    }
    }
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 8, 2018 8:16 AM