ラジオボタンをクリックしたときに表示/非表示オプション

Question

3番目のラジオボタンをクリックしたときにオプションを表示したい。訪問者が別のラジオボタンを選択したときに再び非表示にします。

私は私のラジオボタンを選択要素について以下のHTMLマークアップを得た：私のCSSで

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

私はこの行っている：

.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

https://stackoverflow.com/a/9813212/4248328私の後半に返信するために申し訳ありません

Answer 2

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(); 
    } 
}); 

Answer 3

何ができるかは、オプション

を無効にしています

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

許可して再度有効にします。

(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"> 
 
\t <label for="workshop_wenst_u_een_factuur">Wenst u een factuur?</label> 
 
\t <br> 
 
\t <span class="input-group"> 
 
\t \t <input class="workshop_wenst_u_een_factuur" name="workshop_wenst_u_een_factuur" value="Ik heb geen factuur nodig." checked="checked" type="radio"> 
 
\t \t Ik heb geen factuur nodig.<br> 
 
\t \t <input class="workshop_wenst_u_een_factuur" name="workshop_wenst_u_een_factuur" value="Ik heb wel een factuur nodig." type="radio"> 
 
\t \t Ik heb wel een factuur nodig.<br> 
 
\t \t <input class="workshop_wenst_u_een_factuur" name="workshop_wenst_u_een_factuur" value="Mijn werkgever zal betalen." type="radio"> 
 
\t \t Mijn werkgever zal betalen.<br> 
 
\t </span> 
 
</p> 
 

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

参考： - - ：すべてのブラウザのために