Скрытие кнопки до тех пор, пока не будет установлен переключатель.

Question

Я пытаюсь создать функцию, которая скрывает &, отключает кнопку отправки, пока не будет установлен переключатель. В настоящее время это то, что у меня есть, и я мог бы использовать здесь руку.

HTML для радиокнопок:

<label class="radioChoice"> 
<input type="radio" name="answer" value="lei"> lei<br> 
<input type="radio" name="answer" value="rosary"> rosary<br> 
<input type="radio" name="answer" value="poi"> poi<br> 
<input type="radio" name="answer" value="hula"> hula<br> 
<input type="radio" name="answer" value="crea"> crea<br> 
</label> 
<input class="btn btn-primary submit-btn" id="go-button" type="submit" value="Next Question"> 

JQuery событие Слушатель:

// Listen to radio button - hide submit button when none selected 
$('.radioChoice').on('click', '#go-button', function(event) { 
    event.preventDefault(); 
    $(this).closest('input').find('.submit-btn').toggleClass('hidden'); 
}) 

Я также попытался использовать эту технику, но без успеха.

if ($('input[type=radio]:checked').size <= 0) { 
    $('#go-button').addClass('hidden').prop('disabled', true); 
} else { 
    $('#go-button').removeClass('hidden').prop('disabled', false); 
} 

Любые советы или помощь.

Answer 1

Вы можете использовать только css и :checked псевдокласс.

Demo. Если вы хотите узнать больше о :checked, читайте this.

Помните, что вы должны установить флажок и отправить в том же родителе, чтобы использовать ~.

Пример

.submit-btn { 
 
    display: none; 
 
} 
 

 
.choiceInput:checked ~ .submit-btn { 
 
    display: block; 
 
}

<label class="radioChoice"> 
 
    <input class="choiceInput" type="radio" name="answer" value="lei"> lei 
 
    <br> 
 
    <input class="choiceInput" type="radio" name="answer" value="rosary"> rosary 
 
    <br> 
 
    <input class="choiceInput" type="radio" name="answer" value="poi"> poi 
 
    <br> 
 
    <input class="choiceInput" type="radio" name="answer" value="hula"> hula 
 
    <br> 
 
    <input class="choiceInput" type="radio" name="answer" value="crea"> crea 
 
    <br> 
 
    <input class="btn btn-primary submit-btn" id="go-button" type="submit" value="Next Question"> 
 
</label>

Answer 2

Вот рабочий пример (я добавил .hidden-класс, а также, которые могут быть использованы или нет, не имеет никакого значения):

// Listen to radio button - hide submit button when none selected 
 
$('.radioChoice input[type=radio]').click(function() { 
 
if ($(this).is(':checked')) { 
 
\t $('#go-button').prop('disabled',false).removeClass('hidden'); 
 
} 
 
})

.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="radioChoice"> 
 
<input type="radio" name="answer" value="lei"> lei<br> 
 
<input type="radio" name="answer" value="rosary"> rosary<br> 
 
<input type="radio" name="answer" value="poi"> poi<br> 
 
<input type="radio" name="answer" value="hula"> hula<br> 
 
<input type="radio" name="answer" value="crea"> crea<br> 
 
</label> 
 
<input class="btn btn-primary submit-btn hidden" id="go-button" type="submit" value="Next Question">