javascript - 隐藏按钮直到选中单选按钮

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>