仅当选择了1/3+1/3单选选项时,才可单击按钮

Only make button clickable when 1/3 + 1/3 radio options are selected

本文关键字:按钮 单击 选项 选择 单选      更新时间:2023-09-26

如何使html底部的下一个<button>只能在选中每个<input type="radio">中的一个时单击?此外,如何将其应用于我当前的函数?

按钮本身会触发一个jquery,它将隐藏这个特定的字段集并显示另一个字段集(请参见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="answersw">
    <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>

编辑:

它必须在特定的字段集中检查两次无线电检查

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

也就是说,因为当我单击"下一步"时,这个字段集将隐藏,另一个字段集将显示新的单选框。

编辑2:

下面的下一个div是相同的,但数字为+1

<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="answersw">
                <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>

以及2.的jQuery

    //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();
                });
            });

您可以将change事件附加到子代input元素,并确定是否至少选择了两个单选元素。然后根据该布尔值设置button元素的disabled属性。

此处示例

$('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);
});

您应该在最后一个字段集(如)中检查检查的无线电输入计数

var ACTIVE = false;
$("input").change(function(){
    ACTIVE = true;
    if($("fieldset").last().children("input:radio:checked").length != 1 ) 
  {
    ACTIVE = false;
  }
  $("#submit").prop("disabled", !ACTIVE);
})

看看这个编辑过的小提琴