How to disable a combobox through a jquery condition?

Question

How to disable a combobox through a jquery condition?

Navigation

#1 by (2 votes)
#2 by (1 votes)

3

I'm working on a project in Rails, where in a view project I have several comboBox, where at first I would like only one to be enabled, and according to the selected value the others are released. I think it would be interesting to use JavaScript or / with jQuery to do this, but I have little knowledge in both. Does anyone tell me how to do it? A light so I can follow?

Here is the code I tried, but it did not work:

var update_field = function () {
    if ($(".card") == 'Spell') {
        $('.cardFamily').prop('disabled', false);
    } else {
        $('.cardFamily').prop('disabled', 'disabled');
    }
};

$(update_field);

javascript jquery ruby-on-rails

asked by anonymous 14.10.2015 / 00:42

2 answers

2

To enable and disable a select you can use the following codes respectively:

With jQuery:

$('.cidades').prop("disabled", true);
$('.cidades').prop("disabled", false);

With JavaScript:

var cells = document.getElementsByClassName("cidades");

for (var i = 0; i < cells.length; i++) {
    cells[i].disabled = true; //ou false;
}

Now just put the same ones in your checks. Here's an example in jsfiddle .

14.10.2015 / 01:18

My database is changing the surname by the registered name and the email does not appear Feed list gives "Index out of range"

score 1 · Accepted Answer

First of all in its if ($(".card") == 'Spell') is not testing the value of card, you should get the value, that is, if ($(".card").val() == 'Spell')

So you want that when selecting a comboBox others will become available.

$("#familia").change(troca);

function troca(){
  
  $(".familia").prop( "disabled", true );//desabilita todas opcoes
  
  var objetoSelecionado = $(this).val();//busca o valor o campo selecionado
  $("."+objetoSelecionado).prop("disabled", false); // habilita somente a selecionada.
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectid="familia">
  <option value ="">Nenhum</option>
  <option value ="souza">Souza</option>
  <option value ="silva">Silva</option>
</select>

<select class="familia souza" disabled>
 <option value ="">vazio</option>
 <option value ="maria">Maria Souza</option>
 <option value ="mario">Mario Souza</option>
</select>

<select class="familia silva" disabled>
 <option value ="">vazio</option>
 <option value ="maria">Maria silva</option>
 <option value ="mario">Mario silva</option>
</select>