隐藏按钮，直到选中单选按钮

Question

我试图创建一个隐藏＆amp; amp;禁用提交按钮，直到选中单选按钮。目前这就是我所拥有的，我可以在这里使用。

单选按钮的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-class，可以使用或不使用，并不重要）：

＆＃13;

＆＃13;

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

＆＃13;

.hidden {
  display: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;