仅当选择了1/3+1/3单选选项时,才可单击按钮
Only make button clickable when 1/3 + 1/3 radio options are selected
如何使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);
})
看看这个编辑过的小提琴
相关文章:
- 如何隐藏按钮单击事件上的占位符
- 从Web服务器下载图像按钮单击使用JavaScript
- 在SweetAlert中传递ASP.NET按钮单击事件
- 单选按钮单击可刷新/更改网站的小区域
- 调用按钮单击事件 ajax 加载的用户控件
- 附加 jQuery 代码以在加载和按钮单击时运行
- 在按钮单击时将图像URL数据显示到弹出框中,而无需禁用背景
- 按钮单击服务器单击
- 触发单选按钮单击,并在页面刷新时记住选择
- 如何使用 javascript 而不是使用控制器中的方法在 rails 中呈现部分按钮单击
- jQuery UI 选项卡 - 将参数设置为下一个/上一个按钮单击
- 如何在 Angular JS 中的按钮单击上添加类
- 当元素上有多个类时触发按钮单击事件
- 如何在 HTML 中的按钮单击上更改图像(IMG URL 每次来自服务器)
- 如何使用javascript刷新我的html页面时清除按钮单击
- 阻止后退按钮 - 单击按钮时忽略
- 如何制作按钮.单击“开始时不运行”
- Rails:尝试在按钮单击时渲染部分
- 在页面加载时调用函数,在按钮单击时再次调用函数,但参数不同
- 如何在服务器端的文本中添加按钮单击事件