Question

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

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

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

Answer 2

这是一种方法：在每次无线电更改时，运行一个检查特定部分是否被检查的功能，如果是，则显示按钮。否则，隐藏按钮。

这就是它的全部内容，将它转换为JS应该很容易。

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

我认为这会对你有帮助。

由于

Answer 4

检查此方法

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

productDataTable

我也改变了你的DOM，所以它是有效的HTML。并添加了几个类。

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

4 个答案: