Fill value in combobox when clicking on checkbox

Navigation
0

I'm doing a customer registration and it has a checkbox that fills an input with "OFF, leaves it as" READONLY "and needs to fill in a combobox with a value that is in the options. But I tried everything and I can not do it, could you give me a light? Follow the code I've made. 

function IEcli() {
  var cbocontribuinte = document.getElementById('tp_contribuinte');
  if ($('#iecli').prop("checked")) {
    $('#estadual').val("ISENTO");
    $('#estadual').attr("readOnly", true);
    cbocontribuinte.selectedIndex = 2;

  } else {
    $('#estadual').val("");
    $('#estadual').removeAttr("readOnly");
    cbocontribuinte.selectedIndex = 0;
  }
}
<label class="col-xs-1 control-label" id="esterg">I. Estadual</label>
<div class="col-xs-2">
  <input type="text" class="form-control" name="estadual" id="estadual" placeholder="" value="" />
</div>
<div class="checkbox col-xs-2">
  <input type="checkbox" name="iecli" id="iecli" onclick="IEcli()"> Isento?</label>
</div>
</div>
<div class="form-group">
  <label class="col-xs-1 control-label">Insc.Municipal</label>
  <div class="col-xs-2">
    <input type="text" class="form-control" name="nome" placeholder="" value="" />
  </div>
  <label class="control-label col-xs-1"> Contribuinte </label>
  <div class="col-xs-2">
    <select class="form-control selectpicker" name="tp_contribuinte" id="tp_contribuinte" onchange="atualizaIEDest();">
      <option value="0">Selecione</option>
      <option value="1">1 - Contribuinte ICMS</option>
      <option value="2">2 - Contribuinte isento de inscrição no cadastro de contribuintes</option>
      <option value="9">9 - Não contribuinte, que pode ou não possuir inscrição no cadastro de contribuintes</option>
    </select>
  </div>
    
asked by anonymous 06.08.2017 / 20:35

4 answers

1

You can do this with just JavaScript and using object ownership directly. 

function IEcli() {
  var cbocontribuinte = document.getElementById('tp_contribuinte');
  var iecli = document.getElementById('iecli').checked;
  var estadual = document.getElementById('estadual');

  estadual.value = iecli ? "ISENTO" : "";
  estadual.readOnly = iecli;
  cbocontribuinte.selectedIndex = iecli ? 2 : 0;
}
<label class="col-xs-1 control-label" id="esterg">I. Estadual</label>
<div class="col-xs-2">
  <input type="text" class="form-control" name="estadual" id="estadual" placeholder="" value="<?php echo $cliente->getInscestRg() ?>" />
</div>
<div class="checkbox col-xs-2">
  <input type="checkbox" name="iecli" id="iecli" onclick="IEcli()"> Isento?</label>
</div>
</div>
<div class="form-group">
  <label class="col-xs-1 control-label">Insc.Municipal</label>
  <div class="col-xs-2">
    <input type="text" class="form-control" name="nome" placeholder="" value="<?php echo $cliente->getInscMunicipal() ?>" />
  </div>
  <label class="control-label col-xs-1"> Contribuinte </label>
  <div class="col-xs-2">
    <select class="form-control selectpicker" name="tp_contribuinte" id="tp_contribuinte" onchange="atualizaIEDest();">
      <option value="0">Selecione</option>
      <option value="1">1 - Contribuinte ICMS</option>
      <option value="2">2 - Contribuinte isento de inscrição no cadastro de contribuintes</option>
      <option value="9">9 - Não contribuinte, que pode ou não possuir inscrição no cadastro de contribuintes</option>
    </select>
  </div>
    
06.08.2017 / 21:04
0

.val() is JQuery. Pure JavaScript .value .

In JQuery: 

function IEcli () {

    var cbocontribuinte = $( '#tp_contribuinte' );

    if ( $( '#iecli' ).prop( 'checked', true ) ) {
        $( '#estadual' ).val( 'ISENTO' );
        $( '#estadual' ).prop( 'readonly', true );
        cbocontribuinte.prop(n'selectedIndex', 2 );

    } else {
        $( '#estadual' ).val( '' );
        $( '#estadual' ).prop( 'readonly', false );
        cbocontribuinte.prop( 'selectedIndex', 0 );
    }

}

Pure JavaScript: 

function IEcli () {

    var cbocontribuinte = document.getElementById( 'tp_contribuinte' ),
        iecli = document.getElementById( 'iecli' ),
        estadual = document.getElementById( 'estadual' );

    if ( ieclie.checked === true ) {

        estadual.value = 'ISENTO';
        estadual.readOnly = true;
        cbocontribuinte.selectedIndex = '2';

    } else {

        estadual.value = '';
        estadual.readOnly = false;
        cbocontribuinte.selectedIndex = '0';

    }

}
    
06.08.2017 / 20:53
0

In this way, your example is working perfectly.

Particularly I avoid using .attr () in these cases.

NOTE: .val () in addition to entering values, can also be used to select options. 

function IEcli() {
    if ($('#iecli').prop("checked")) {
        $('#estadual').val("ISENTO");
        $('#estadual').prop("readonly", true);
        $('#tp_contribuinte').val("2");
    } else {
        $('#estadual').val("");
        $('#estadual').prop("readonly", false);
        $('#tp_contribuinte').val("0");
    }
}
    
06.08.2017 / 21:14
0

There are no errors in your code! Quite simply, as MarceloBoni said in the comment Acredito que o que falta é incluir o jquery na sua pagina which should have been Falta é incluir o jquery na sua pagina . To corroborate this comment I execute here your code with jquery. 

        function IEcli() {
  var cbocontribuinte = document.getElementById('tp_contribuinte');
  if ($('#iecli').prop("checked")) {
    $('#estadual').val("ISENTO");
    $('#estadual').attr("readOnly", true);
    cbocontribuinte.selectedIndex = 2;

  } else {
    $('#estadual').val("");
    $('#estadual').removeAttr("readOnly");
    cbocontribuinte.selectedIndex = 0;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><labelclass="col-xs-1 control-label" id="esterg">I. Estadual</label>
<div class="col-xs-2">
  <input type="text" class="form-control" name="estadual" id="estadual" placeholder="" value="" />
</div>
<div class="checkbox col-xs-2">
  <input type="checkbox" name="iecli" id="iecli" onclick="IEcli()"> Isento?</label>
</div>
</div>
<div class="form-group">
  <label class="col-xs-1 control-label">Insc.Municipal</label>
  <div class="col-xs-2">
    <input type="text" class="form-control" name="nome" placeholder="" value="" />
  </div>
  <label class="control-label col-xs-1"> Contribuinte </label>
  <div class="col-xs-2">
    <select class="form-control selectpicker" name="tp_contribuinte" id="tp_contribuinte" onchange="atualizaIEDest();">
      <option value="0">Selecione</option>
      <option value="1">1 - Contribuinte ICMS</option>
      <option value="2">2 - Contribuinte isento de inscrição no cadastro de contribuintes</option>
      <option value="9">9 - Não contribuinte, que pode ou não possuir inscrição no cadastro de contribuintes</option>
    </select>
  </div>
  

If you really want to use pure JavaScript use Sergio's answer

    
07.08.2017 / 00:33
Create numbered files in order Group [group by] SQL Firebird