隐藏按钮，直到选中两个名称答案

【问题标题】：Hide button until two names are checked隐藏按钮，直到选中两个名称
【发布时间】：2015-12-20 11:47:31
【问题描述】：

我想隐藏一个按钮，直到选中两个具有两个不同名称的特定单选按钮。我只是不知道该怎么做..

HTML

<form>
    <!-- First question -->
    <fieldset>
        <input type="radio" name="trend1" value="Progressing">
        <input type="radio" name="trend1" value="Regressing">
    </fieldset>

    <fieldset>
        <input type="radio" name="q1" value="Good">
        <input type="radio" name="q1" value="Bad">
    </fieldset>

    <button class="next" type="button" name="hideQ1"> 
    <!-- Disable this button until one option on #trend1 and #q1 are checked. -->
    <!-- Not a submit button, if that matters -->

    <!-- Second question -->
    <fieldset>
        <input type="radio" name="trend2" value="Progressing">
        <input type="radio" name="trend2" value="Regressing">
    </fieldset>

    <fieldset>
        <input type="radio" name="q2" value="Good">
        <input type="radio" name="q2" value="Bad">
    </fieldset>

    <button class="next" type="button" name="hideQ2">
    <!-- Disable this button until one option on #trend2 and #q2 are checked. -->
    <!-- Not a submit button, if that matters -->
</form>

我有点知道如何在整个表单中执行此操作，但按钮的作用是隐藏当前问题并显示下一个问题，因此在检查特定名称之前隐藏按钮将是最好的方法我去解决它..

非常感谢任何帮助/提示。

编辑：

隐藏，禁用或隐藏。类似的东西。

编辑2：

这是我尝试过的，也许它可以帮助您了解我想要什么。但它所做的只是完全禁用下一个按钮。

 $(document).ready(function(){
    $('button[name="hideQ1"]').attr('disabled');
    if ($('input[name="q1"]').is(':checked')) && ($('input[name="trend1"]').is(':checked')) {
        $('button[name="hideQ1"]').removeAttr('disabled');
    }
});

【问题讨论】：

请告诉大家，这些RB属于不同的组。如果我们知道你想要哪两个按钮也很好
@KaminPallaghy 是的，name="trend1" 的输入只能点击一个按钮，name="q1" 只能点击一个按钮等等。我在html代码中标记了按钮有评论吗？
对不起，我真的不知道，但是按钮是否有可见属性。并单击按钮是否触发事件（例如，运行 RadioButton_Num1.clicked 代码），如果是这样，那么当单击其中一个按钮时，获取它以检查是否单击了另一个按钮，然后切换按钮的可见属性
@KaminPallaghy 已编辑，也许它会帮助你了解我想要什么

标签： javascript jquery html

【解决方案1】：

也许是这样的。

var trend1  = document.getElementsByName('trend1'),
    q1      = document.getElementsByName('q1'),
    button1 = document.getElementsByName('hideQ1')[0],
    trend2  = document.getElementsByName('trend2'),
    q2      = document.getElementsByName('q2'),
    button2 = document.getElementsByName('hideQ2')[0]

function checked(inputArr) {
  return [].some.call(inputArr, function (input) {
    return input.checked
  })
}

[].forEach.call(document.querySelectorAll('input[type=radio]'), function (input) {
  input.addEventListener('click', function () {
    if (checked(trend1) && checked(q1)) button1.removeAttribute('disabled') 
    if (checked(trend2) && checked(q2)) button2.removeAttribute('disabled') 
  })
})

  <form>
      <!-- First question -->
      <fieldset>
          <input type="radio" name="trend1" value="Progressing">
          <input type="radio" name="trend1" value="Regressing">
      </fieldset>

      <fieldset>
          <input type="radio" name="q1" value="Good">
          <input type="radio" name="q1" value="Bad">
      </fieldset>

  <button class="next" type="button" name="hideQ1" value="next" disabled>Next for q1</button> 
      <!-- Disable this button until one option on #trend1 and #q1 are checked. -->
      <!-- Not a submit button, if that matters -->

      <!-- Second question -->
      <fieldset>
          <input type="radio" name="trend2" value="Progressing">
          <input type="radio" name="trend2" value="Regressing">
      </fieldset>

      <fieldset>
          <input type="radio" name="q2" value="Good">
          <input type="radio" name="q2" value="Bad">
      </fieldset>

  <button class="next" type="button" name="hideQ2" disabled>Next for q2</button>
      <!-- Disable this button until one option on #trend2 and #q2 are checked. -->
      <!-- Not a submit button, if that matters -->
  </form>

【讨论】：

优雅，很容易适用于其余的问题，而不会破坏其他脚本。谢谢！

【解决方案2】：

这是一种方法：在每次收音机更改时，运行一个函数来检查是否检查了特定的收音机，如果是，则显示按钮。否则，隐藏按钮。

这就是它的全部内容，将它翻译成 JS 应该很容易。

【讨论】：

【解决方案3】：

如果您通过 ajax 调用添加问题，则可以使用相同的电台名称（两个电台）。

然后你可以对所有问题使用相同的代码。

这是我的方法兄弟：

$( document ).ready(function() {	
 // Your Code Start 		
 
 	var isTrend1 = false;
 	var isQ1 = false;

 	$("input[name='trend1']").on("click", function (e){	
		isTrend1 =$("input[name='trend1']").is(':checked'); 
		isQ1 =$("input[name='q1']").is(':checked'); 

		if ( isTrend1 && isQ1 ) {			
			$('.hideQ1').css({'display':'block'});
		}
	});

 	$("input[name='q1']").on("click", function (e){				
		isTrend1 =$("input[name='trend1']").is(':checked'); 
		isQ1 =$("input[name='q1']").is(':checked'); 
		if ( isTrend1 && isQ1 ) {			
			$('.hideQ1').css({'display':'block'});
		}		
	});	

 	$(".hideQ1").on("click", function (e){				
		$('.hideQ1').css({'display':'none'});		
		$('.question_1').css({'display':'none'});		
		$('.question_2').css({'display':'block'});		
	});	

 	var trend2 = false;
 	var isQ2 = false;

 	$("input[name='trend2']").on("click", function (e){	
		isTrend2 =$("input[name='trend2']").is(':checked'); 
		isQ2 =$("input[name='q2']").is(':checked'); 
		if ( isTrend2 && isQ2 ) {			
			$('.hideQ2').css({'display':'block'});
		}
	});

 	$("input[name='q2']").on("click", function (e){				
		isTrend2 =$("input[name='trend2']").is(':checked'); 
		isQ2 =$("input[name='q2']").is(':checked'); 
		if ( isTrend2 && isQ2 ) {			
			$('.hideQ2').css({'display':'block'});
		}		
	});	
	

 // Your Code End 	
});
// Document Ready Start

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
    <!-- First question -->
    <div class="question_1">
	    <fieldset>
	        <input type="radio" name="trend1" value="Progressing">Progressing Q1
	        <input type="radio" name="trend1" value="Regressing">Regressing Q1
	    </fieldset>

	    <fieldset>
	        <input type="radio" name="q1" value="Good">Good Q1
	        <input type="radio" name="q1" value="Bad">Bad Q1
	    </fieldset>
	</div>

    <button class="next hideQ1" type="button" name="hideQ1" style="display:none;" value="Next">Next Question Q2
    </button> 
    <!-- Disable this button until one option on #trend1 and #q1 are checked. -->
    <!-- Not a submit button, if that matters -->

	<div class="question_2" style="display:none;">
	    <!-- Second question -->
	    <fieldset>
	        <input type="radio" name="trend2" value="Progressing">Progressing Q2
	        <input type="radio" name="trend2" value="Regressing">Regressing Q2
	    </fieldset>

	    <fieldset>
	        <input type="radio" name="q2" value="Good">Good Q2
	        <input type="radio" name="q2" value="Bad">Bad Q2
	    </fieldset>
	</div>
    <button class="next hideQ2" type="button" name="hideQ2" style="display:none;">Next Question Q 3</button>
    <!-- Disable this button until one option on #trend2 and #q2 are checked. -->
    <!-- Not a submit button, if that matters -->
</form>

我想这会对你有所帮助。

谢谢

【讨论】：

【解决方案4】：

检查这种方法

https://jsfiddle.net/q4vvdwc5/1/

$(document).ready(function(){
    var inputs = $("input[name^='trend'], input[name^='q']");
    inputs.change(function(){
    selected = [0, 0];
    var self = $(this);
    qnumber = $(this).attr('name').slice(-1);
    inputs.each(function(index, element){
        if ($(element).attr('name').slice(-1) == qnumber && $(element).prop('checked')) {
        selected[qnumber-1] += 1;
        if (selected[qnumber-1] > 1) {
            $(this).closest('fieldset').siblings(".next[class$='after"+qnumber+"']").show();
        }
        console.log(qnumber, selected[qnumber-1]);
      }
    });
  });
});

我还稍微修改了您的 DOM，使其成为有效的 HTML。并添加了一些类。

【讨论】：