Enable/Disable SELECT field

Asked

Viewed 342 times

2

<div class="form-group">                    
    <label>Tipo de Conta</label>
    <select class="form-control" id="banco" name="banco">
        <option value="" selected>Selecione</option>
        <option value="0">Conta Corrente</option>
        <option value="1">Conta Poupança</option>
        <option value="2">Caixa (em espécie)</option>
    </select>
</div>

<div class="form-group">                    
    <label>Nome do Banco</label>
    <select class="form-control" id="banco" name="banco">
        <option value="" selected>Selecione</option>
        <option value="0">Santander</option>
        <option value="1">Caixa</option>
        <option value="2">Banco do Brasil</option>
    </select>
</div>

I would like to know how to enable/disable SELECT "Bank Name" according to the "Account Type" selected. Example:

If the user selects the "Account Type" -> Current Account, the "Bank Name" field enables;

If the user selects the "Account Type" -> Box (in kind), the "Database Name" field disables;

php html5

  • You have to use Javascript for this. Search for events (more specifically change) and try to do and post the code. If there is difficulty we can try to help.

  • I’ll give a survey, thanks for the tip.

2 answers

3

I just made a change to value select, as it starts at 0, every time he checks and finds the value "", will treat it the same way. For this, I inserted with the captions below:

CC: Conta Ccurrent

CP: Conta Poupauss

CE: Cshawl Andspécie

Try it this way:

function habilitarCampos() {
	if($("#banco").val() == 'CC') {
		$("#nomebanco").prop('disabled', false);
	} else {
  	$("#nomebanco").prop('disabled', true);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">                    
    <label>Tipo de Conta</label>
    <select class="form-control" id="banco" name="banco" onchange='habilitarCampos()'>
        <option value="" selected>Selecione</option>
        <option value="CC">Conta Corrente</option>
        <option value="CP">Conta Poupança</option>
        <option value="CE">Caixa (em espécie)</option>
    </select>
</div>

<div class="form-group">                    
    <label>Nome do Banco</label>
    <select class="form-control" id="nomebanco" name="banco">
        <option value="" selected>Selecione</option>
        <option value="0">Santander</option>
        <option value="1">Caixa</option>
        <option value="2">Banco do Brasil</option>
    </select>
</div>

  • I’ll implement it in the code and tell you if it worked, thanks for the help.

  • @luizgparaujo, no problem, if it works, vote on the answer and select this answer as the solution please :)

  • I did the implementation in the code, but I couldn’t make it work. I created a Javascript file and inserted the function enable Fields, then inserted the script in my case in head, and adjusted the rest of the code, not sure if something was missing...

  • Strange... It should work... Try to put the script below the Forms, see if it works

0


You can use a Event Listener .change() to listen to changes in the first select and change the second.

But see that you’re wearing the same id and name in both selects. This is incorrect because a id cannot be repeated, and in the case of name repeated, if you submit the form, it will only take the value of the second select.

I suggest changing the id and the name from the first select to id="conta" and name="conta", avoiding conflict between the two selects.

Another suggestion is to set the second select with the attribute disabled so that it is already loaded disabled, and in the script, when the value of the first select is equal to vazio or 2, disable the second select. You can use a ternary for this, as I used in the script below.

Another thing is to put the code inside the event .ready() (or just $(function(){});), waiting for the DOM to be loaded if you are running the script on head page, but you also need the script to be loaded after jQuery library upload:

<head>
   <script src="caminho do jquery.js"></script>
   <script>
   // aqui vem o script
   </script>
</head>

The code will look like this:

$(function(){
   $("#conta").change(function(){
      $("#banco")
      .prop(
         "disabled",
         this.value == 2 || !this.value ? true : false
      );
   });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">                    
    <label>Tipo de Conta</label>
    <select class="form-control" id="conta" name="conta">
        <option value="" selected>Selecione</option>
        <option value="0">Conta Corrente</option>
        <option value="1">Conta Poupança</option>
        <option value="2">Caixa (em espécie)</option>
    </select>
</div>

<div class="form-group">                    
    <label>Nome do Banco</label>
    <select class="form-control" id="banco" name="banco" disabled>
        <option value="" selected>Selecione</option>
        <option value="0">Santander</option>
        <option value="1">Caixa</option>
        <option value="2">Banco do Brasil</option>
    </select>
</div>

  • Thanks for your attention, I implemented the code and it worked. Thank you so much for the tips too...

  • Hi Luiz! It’s around?!

Browser other questions tagged php html5

You are not signed in. Login or sign up in order to post.