DOM事件链不起作用

时间:2016-04-19 05:21:11

标签: javascript dom chaining

那么,有什么提示为什么这不起作用? 如果选择'Boleto'radiobox,我试图将两个输入字段('pagamento'和'parcelas')设置为预设(分别为'1'和'MercadoPago',如果''则再次返回到用户输入' Cartão'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>

1 个答案:

答案 0 :(得分: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文件中并在那里进行编辑。

&#13;
&#13;
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');
&#13;
<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>
&#13;
&#13;
&#13;