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

  • Question

  • 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

  • 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

  • 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
  • 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
  • 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