Ad

Only Make Button Clickable When 1/3 + 1/3 Radio Options Are Selected

- 1 answer

How do I make it so that the next <button> on the bottom of the html is only clickable WHEN one of each<input type="radio"> is checked? Also, how do I apply it with my current function?

The button itself triggers a jquery which will hide this particular fieldset and display another (see bottom of javascript).

HTML:

<div id="q1">
<fieldset class="fiel" name="q1">
<?php  
    $tidlol=$_GET['team'];
    echo "<input type='hidden' name='teamid' value='$tidlol'>";
?>
<img class="img2" src="img/q1.svg" alt="communication">
<img class="img3" src="img/f1.svg" alt="communication">
<div class="qb">
    <div class="great">
        <p class="tq"><?php echo $q1awesome ?></p>
    </div>
    <div class="alone">
        <p class="tq"><?php echo $q1awful ?></p>
    </div>
</div>
<fieldset class="mama">
    <li>
        <label>
            <input type="radio"   name="trend1" value="Progressing" onchange="GrabTrend(this)" />
            <img src="upp.png">
        </label>
    </li>
    <li>
        <label>
            <input type="radio" name="trend1" value="Constant" onchange="GrabTrend(this)" />
            <img src="right.png">
        </label>
    </li>
    <li>
        <label>
            <input type="radio" name="trend1" value="Regressing" onchange="GrabTrend(this)" />
            <img src="down.png">
        </label>
    </li>
</fieldset>
<div id="answ">
    <div id="forklarning">
        <p class="fq"><b>Factors to consider</b>: <?php echo $ftc1 ?></p>
    </div>
    <li>
        <input type="radio" id="q1r1" name="q1" value="Awesome" onchange="GrabData(this)">
        <label class="button1" for="q1r1">Awesome</label>
    </li>
    <li>
        <input type="radio" id="q1r2" name="q1" value="Ok" onchange="GrabData(this)">
        <label class="button2" for="q1r2">Ok</label>
    </li> 
    <li>
        <input type="radio" id="q1r3" name="q1" value="Awful" onchange="GrabData(this)">
        <label class="button3" for="q1r3">Awful</label>
    </li>
    <br>
    <br>
    <div class="comment">
          <textarea name='q1comment' id='comment'></textarea>
    <br>

    </div>

    <div id="hideQ1" style="float:right;">
          <button class="next" type="button" name="hideQ1">Next</button>   
    </div>
</div>  
</fieldset>
</div> <!--Forgot to include the first div..-->
<script>
$(document).ready(
    function() {
        $("#hideQ1").click(function() {
            $("#q1").toggle();
            $("#q2").toggle();
        });
    });
</script>

EDIT:

It must check for two radio checks in a particular fieldset,

<fieldset class="fiel" name="q1">

that is, since when I click "Next", this fieldset will hide and another one will appear with new radio boxes.

EDIT 2:

The next following div is identical, but +1 on numbers

<div id="q2" style="display:none;">
        <fieldset class="fiel" name="q2">
            <img class="img2" src="img/q2.svg" alt="communication">
            <img class="img3" src="img/f2.svg" alt="communication">
            <div class="qb">
                <div class="great">
                    <p class="tq"><?php echo $q2awesome ?></p> 
                </div>
                <div class="alone">
                    <p class="tq"><?php echo $q2awful ?></p>
                </div>
            </div>
            <fieldset class="mama">

                <li>
                    <label>
                        <input type="radio" name="trend2" value="Progressing" onchange="GrabTrend2(this)" />
                        <img src="upp.png">
                    </label>
                </li>
                <li>
                    <label>
                        <input type="radio" name="trend2" value="Constant" onchange="GrabTrend2(this)" />
                        <img src="right.png">
                    </label>
                </li>
                <li>
                    <label>
                        <input type="radio" name="trend2" value="Regressing" onchange="GrabTrend2(this)"/>
                        <img src="down.png">
                    </label>
                </li>
            </fieldset>
            <div id="answ">
                <div id="forklarning">
                    <p class="fq"><b>Factors to Consider </b>: <?php echo $ftc2 ?></p>
                </div>
                <li>
                    <input type="radio" id="q2r1" name="q2" value="Awesome" onchange="GrabData2(this)">
                    <label class="button1" for="q2r1">Awesome</label>
                </li>
                <li>
                    <input type="radio" id="q2r2" name="q2" value="Ok" onchange="GrabData2(this)">
                    <label class="button2" for="q2r2">Ok</label>
                </li> 
                <li>
                    <input type="radio" id="q2r3" name="q2" value="Awful" onchange="GrabData2(this)">
                    <label class="button3" for="q2r3">Awful</label>
                </li> 
                <br>
                <br>
                <div class="comment">
                    <textarea name='q2comment' id='comment'></textarea>             
                </div>

                <div id="hideQ2" style="float:right;">
                    <button class="next" type="button" name="hideQ2">Next</button>
                </div>
            </div>
        </fieldset>
    </div>

and the jQuery for 2..

    //Show/hide questions on click Next
        $(document).ready(
            function() {
                $("#hideQ1").click(function() {
                    $("#q1").toggle();
                    $("#q2").toggle();
                });
            });
        $(document).ready(
            function() {
                $("#hideQ2").click(function() {
                    $("#q2").toggle();
                    $("#q3").toggle();
                });
            });
Ad

Answer

You could attach a change event to the descendant input elements and determine whether at least two radio elements are selected. Then set the button element's disabled attribute based off of this boolean.

Example Here

$('fieldset button').attr('disabled', true);

$('fieldset input').on('change', function() {
  var disabled = $(this).closest('fieldset').find('input:checked').length < 2;
  $(this).closest('fieldset').find('button').attr('disabled', disabled);
});
Ad
source: stackoverflow.com
Ad