单击单选按钮时隐藏/显示选项

Question

我想在单击第三个单选按钮时显示一个选项。并在访问者选择另一个单选按钮时再次隐藏它。

我的单选按钮和选择元素得到了以下 html 标记：

<p class="input-group input-radio input-field-workshop_wenst_u_een_factuur">
  <label for="workshop_wenst_u_een_factuur">
    Wenst u een factuur?
  </label>
  <span class="input-group">
    <input class="workshop_wenst_u_een_factuur" name="workshop_wenst_u_een_factuur" value="Ik heb geen factuur nodig." checked="checked" type="radio">
      Ik heb geen factuur nodig.<br>
    <input class="workshop_wenst_u_een_factuur" name="workshop_wenst_u_een_factuur" value="Ik heb wel een factuur nodig." type="radio">
      Ik heb wel een factuur nodig.<br>
    <input class="workshop_wenst_u_een_factuur" name="workshop_wenst_u_een_factuur" value="Mijn werkgever zal betalen." type="radio">
      Mijn werkgever zal betalen.<br>
  </span>
</p>

<p id="em-booking-gateway" class="em-booking-gateway" style="display: block;">
  <label>Betaal met</label>
  <select name="gateway">
    <option value="idealcheckoutcreditcard">Creditcard</option>
    <option value="idealcheckoutminitix">Werkgever betaalt</option>
    <option value="idealcheckoutmistercash">MisterCash</option>
    <option value="idealcheckoutpaypal">PayPal</option>
    <option value="idealcheckoutmastercard">Mastercard</option>
  </select>
</p>

在我的 css 中我已经这样做了：

.idealcheckoutminitix {
  display: none;
}

这是我的 Javascript：

(function($) {
  $('input[value="Ik heb geen factuur nodig."]').attr('checked',true);
  $(".em-booking-gateway").css('display', 'block');
  $("input[name='workshop_wenst_u_een_factuur']").click(function () {
    $("option[value='idealcheckoutminitix']").css('display', ($(this).val() === 'Mijn werkgever zal betalen.') ? 'block' : 'none');
  })
})(jQuery);

这在Firefox 中工作得很好，但在Safari 中却不行。我知道Safari 不允许在选项元素上显示 none，但有什么办法可以解决这个问题？

Answer 1

对于所有浏览器：-

(function($) {
  var myOpts = $("option[value='idealcheckoutminitix']").detach();//initially disable the setion of option
  $('input[type="radio"]').click(function(){//radio button click event
    if ($('input[type="radio"]:last').is(':checked')) { //when third radio button is checked
      $('select[name="gateway"]').append(myOpts);
    }else {
        myOpts.detach();
    }
  });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<p class="input-group input-radio input-field-workshop_wenst_u_een_factuur">
	<label for="workshop_wenst_u_een_factuur">Wenst u een factuur?</label>
	<br>
	<span class="input-group">
		<input class="workshop_wenst_u_een_factuur" name="workshop_wenst_u_een_factuur" value="Ik heb geen factuur nodig." checked="checked" type="radio">
		  Ik heb geen factuur nodig.<br>
		<input class="workshop_wenst_u_een_factuur" name="workshop_wenst_u_een_factuur" value="Ik heb wel een factuur nodig." type="radio">
		  Ik heb wel een factuur nodig.<br>
		<input class="workshop_wenst_u_een_factuur" name="workshop_wenst_u_een_factuur" value="Mijn werkgever zal betalen." type="radio">
		  Mijn werkgever zal betalen.<br>
	</span>
</p>

<p id="em-booking-gateway" class="em-booking-gateway">
	<label>Betaal met</label>
	<br>
	<select name="gateway">
		<option value="idealcheckoutcreditcard">Creditcard</option>
		<option value="idealcheckoutminitix">Werkgever betaalt</option>
		<option value="idealcheckoutmistercash">MisterCash</option>
		<option value="idealcheckoutpaypal">PayPal</option>
		<option value="idealcheckoutmastercard">Mastercard</option>
	</select>
</p>

参考：-https://stackoverflow.com/a/9813212/4248328

Answer 2

您可以做的是禁用该选项

$("option[value='idealcheckoutminitix']").prop('disabled', true);

并在允许时再次启用它。

Answer 3

不使用display: none，请使用jquery show/hide。

加载时隐藏选项：

$(function(){
    $("option[value='idealcheckoutminitix']").hide();
});

然后在选择第三个单选按钮时使用您的代码显示它：

$("input[name='workshop_wenst_u_een_factuur']").click(function () {
    if ($(this).is(':checked')) {
        //Verify if is checked
        $("option[value='idealcheckoutminitix']").show();
    }
    else {
        //When not checked, hide again
        $("option[value='idealcheckoutminitix']").hide();
    }
});