DOM事件链接不工作

Question

所以，任何暗示为什么这不起作用？ 如果选择'Boleto'radiobox（'1'和'MercadoPago'，分别返回到用户输入，并且如果选择'Boleto'radiobox'，则试图在预设中同时获得两个输入字段（'pagamento'和'parcelas'） '卡唐' radiobox选择。

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元素。使用onChange代替，这意味着你将不再需要调用onKeyUp="fpagamento();"

BTW：你的代码是非常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>