Я хочу скрыть кнопку, пока не будут проверены две конкретные радиокнопки с двумя разными именами. Я просто не знаю, как это сделать ..

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');
    }
});
1
Mo Mononoke 20 Дек 2015 в 14:47

4 ответа

Лучший ответ

Может быть, что-то подобное.

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
Jean-Baptiste Rudant 20 Дек 2015 в 12:22

Проверьте этот подход

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. И добавил несколько классов.

0
Victor Nițu 20 Дек 2015 в 13:29

Вот подход: при каждом изменении радиостанции запускайте функцию, которая проверяет, проверены ли конкретные, и если да, показывайте кнопку. В противном случае скрыть кнопку.

Это все, что нужно сделать, и это должно быть довольно легко перевести на JS.

0
Shomz 20 Дек 2015 в 12:26

Вы можете использовать то же имя радио (два радио), если вы добавили вопрос через ajax call.

Тогда вы можете использовать тот же код для всех вопросов.

Вот мой подход, братан:

$( 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>

Думаю, это тебе поможет.

Благодарность

0
Uttam Kumar Roy 20 Дек 2015 в 12:42