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不允许在选项元素上显示无，但有什么方法可以解决这个问题吗？

Answer 1

您可以执行的操作是禁用选项

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="datetypediv"></p>

并在允许时再次启用它。

Answer 2

对于所有浏览器： -

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

使用display: none的Intead，使用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();
    }
});

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

3 个答案: