DOMイベントチェーンが機能しない

Question

これはなぜ機能していないのでしょうか？ 'Boleto'ラジオボックスが選択されている場合は、入力フィールド（ 'pagamento'と 'parcelas'）を両方ともプリセットに設定しようとしています（ '1'と 'MercadoPago'）。 'Cartão' ラジオボックスが選択されている。

function boleto() { 
 
    if(document.getElementById('tipodepagamento').checked==true){ 
 
     document.getElementById('pagamento').value = 'MercadoPago'; 
 
     document.getElementById('pagamento').disabled = true; 
 
     document.getElementById('parcelas').value = '1'; 
 
     document.getElementById('parcelas').disabled = true; 
 
    } 
 
    else{ 
 
     document.getElementById('pagamento').disabled = false; 
 
     document.getElementById('parcelas').disabled = false; 
 
    } 
 
}

<div class="col-md-6"> 
 
    <label class="radio-inline"> 
 
     <input type="radio" name="tipodeconta" id="tipodepagamento2" value="Cartão" checked onClick="boleto();">Cartão de Crédito 
 
    </label> 
 
</div> 
 
<div class="col-md-6"> 
 
    <label class="radio-inline"> 
 
     <input type="radio" name="tipodeconta" id="tipodepagamento" value="Boleto" onClick="boleto();">Boleto 
 
    </label> 
 
</div> 
 
<label>Plataforma de Pagamento</label> 
 
<select class="form-control" onClick="fpagamento();validador();" onKeyUp="fpagamento();" name="pagamento" id="pagamento"> 
 
    <option value="Selecione">Selecione</option> 
 
    <option value="Paypal">Paypal</option> 
 
    <option value="MercadoPago">Mercado Pago</option> 
 
</select> 
 
<label>Número de Parcelas</label> 
 
<select class="form-control" id="parcelas" name="parcelas"> 
 
    <option value="1">1x</option> 
 
    <option value="2">2x</option> 
 
</select>

Answer 1

フィドル= http://kodeweave.sourceforge.net/editor/#d692f9461c022ee386cb2c5329f453c4

私はあなたのコードを持ついくつかの問題を参照してください。

<input type="radio" name="tipodeconta" id="tipodepagamento" value="Boleto" onClick="boleto();"> 
<select class="form-control" onClick="fpagamento();validador();" onKeyUp="fpagamento();" 

まず、ラジオボタンにonClick、またはselect要素を使用しないでください。あなたがところでonKeyUp="fpagamento();"

を呼び出す必要がないことを意味している代わりにonChangeを使用する：あなたのコードは非常にWETです。さらに、htmlにonClick属性を追加するのは悪い習慣です（他のイベントでも同じです）。 JavaScriptを.jsファイルに入れて編集します。

var tipodeconta = $('input[name=tipodeconta]'), 
 
    cartao  = document.querySelector('#tipodepagamento2'), 
 
    pagamento = $('#pagamento'), 
 
    checkThis = $('.form-control'); 
 

 
tipodeconta.on('change', function() { 
 
    if (cartao.checked) { 
 
    pagamento.val('MercadoPago'); 
 
    } 
 
    (cartao.checked) ? checkThis.prop('disabled', true) : checkThis.removeAttr('disabled'); 
 
}).trigger('change');

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

 
<div class="panel panel-default"> 
 
    <div class="panel-body"> 
 
    <div class="col-md-6"> 
 
     <label class="radio-inline"> 
 
     <input type="radio" name="tipodeconta" id="tipodepagamento2" value="Cartão" checked=""> 
 
     Cartão de Crédito 
 
     </label> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <label class="radio-inline"> 
 
     <input type="radio" name="tipodeconta" id="tipodepagamento" value="Boleto"> 
 
     Boleto 
 
     </label> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<label>Plataforma de Pagamento</label> 
 
<select class="form-control" name="pagamento" id="pagamento" disabled=""> 
 
    <option value="Selecione">Selecione</option> 
 
    <option value="Paypal">Paypal</option> 
 
    <option value="MercadoPago">Mercado Pago</option> 
 
</select> 
 
<label>Número de Parcelas</label> 
 
<select class="form-control" id="parcelas" name="parcelas" disabled=""> 
 
    <option value="1">1x</option> 
 
    <option value="2">2x</option> 
 
</select>