0

Estou usando o Materialize CSS, tenho uma tela onde gostaria que ao Switch ser ativado, o select mais próximo se torne ativo para o usuário poder selecionar uma opção, e se o Switch voltar para inativo o select também volte ao estado inativo.

HTML

 <form id="relatorio" name="relatorio" class="col s12">
 <div class="row">
   <div class="input-field col s4 l4">
     <select id="filtro2" name="filtro2" disabled>
       <option value="" disabled selected>Filtro</option>
       <option value="1">Opção 1</option>
       <option value="2">Opção 3</option>
       <option value="3">Opção 3</option>
     </select>
     <label>Filtro</label>
   </div>
   <div class="switch col s2 l2">
     <div class="switch">
       <label>
         Não
         <input type="checkbox">
         <span class="lever"></span>
         Sim
       </label>
     </div> 
   </div>

    <div class="input-field col s4 l4">
     <select id="filtro" name="filtro" disabled>
       <option value="" disabled selected>Filtro</option>
       <option value="1">Opção 1</option>
       <option value="2">Opção 3</option>
       <option value="3">Opção 3</option>
     </select>
     <label>Filtro</label>
   </div>
   <div class="switch col s2 l2">
     <div class="switch">
       <label>
         Não
         <input type="checkbox">
         <span class="lever"></span>
         Sim
       </label>
     </div> 
   </div>

 </div><!-- /row -->
</form>

JS

$(document).ready(function () {
    $(".switch").find("input[type=checkbox]").on("change",function() {

        var filtro = $(this).closest("input[type=checkbox]").prop('checked');

        if(filtro == true) {   
            alert("true");
            //$(this).closest('select').prop('disabled', true);
        } else {
            alert("false");
            //$(this).closest('select').prop('disabled', false);
        }
    });
});

Já consigo pegar o valor do Switch para saber quando habilitar o select e quando desabilitar o mesmo, porém não consigo achar qual o select mais próximo para trocar o estado dele.

São vários selects que preciso fazer isso, então achar o mais próximo do Switch e trocar o valor dele é essencial.

Agradeço desde já.

1 Resposta 1

1

Você conseguirá selecionar o elemento usando:

$(this)
.closest('.switch.col')
.prevAll('div.input-field:first')
.find('select')

Irá buscar a div mais próxima que contenha um select e selecionar esse select.

Veja funcionando:

$(document).ready(function () {
   $(".switch").find("input[type=checkbox]").on("change",function() {

      var filtro = $(this).closest("input[type=checkbox]").prop('checked');

      var selects = $(this)
         .closest('.switch.col')
         .prevAll('div.input-field:first')
         .find('select');

      if(filtro) {   
         alert("true");
         selects.prop('disabled', true);
      } else {
         alert("false");
         selects.prop('disabled', false);
      }
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="relatorio" name="relatorio" class="col s12">
 <div class="row">
   <div class="input-field col s4 l4">
     <select id="filtro2" name="filtro2" disabled>
       <option value="" disabled selected>Filtro</option>
       <option value="11">Opção 1</option>
       <option value="2">Opção 3</option>
       <option value="3">Opção 3</option>
     </select>
     <label>Filtro</label>
   </div>
   <div class="switch col s2 l2">
     <div class="switch">
       <label>
         Não
         <input type="checkbox">
         <span class="lever"></span>
         Sim
       </label>
     </div> 
   </div>

    <div class="input-field col s4 l4">
     <select id="filtro" name="filtro" disabled>
       <option value="" disabled selected>Filtro</option>
       <option value="1">Opção 1</option>
       <option value="2">Opção 3</option>
       <option value="3">Opção 3</option>
     </select>
     <label>Filtro</label>
   </div>
   <div class="switch col s2 l2">
     <div class="switch">
       <label>
         Não
         <input type="checkbox">
         <span class="lever"></span>
         Sim
       </label>
     </div> 
   </div>

 </div><!-- /row -->
</form>

Dica

Para comparar valores booleanos, não precisa fazer da forma if(filtro == true). Basta fazer assim: if(filtro).:

if(filtro == true) -> if(filtro)
if(filtro == false) -> if(!filtro)
7
  • Não consigo entender porque no meu código não funcionou, agora ele parece estar pegando o select correto, exceto se tiver 2 na mesma <div class="row">, aí ele seleciona os dois, e o select não ativou em nenhum dos casos, tentei mudar de .prop para .atrr, mas não obtive exito.
    – Dobrychtop
    25/11/2017 às 19:20
  • @Dobrychtop Nunca use .attr para alterar valores true ou false porque não funciona... Bom, Me mostre um exemplo de como seria com 2 selects para eu ver como ficaria.
    – Sam
    25/11/2017 às 19:22
  • Resolvi o problema de não selecionar, isso era causado pelo Materialize e como ele faz os selects, destruí eles antes de trocar a propriedade e inicializei, agora tenho o problema de selecionar os dois na mesma row
    – Dobrychtop
    25/11/2017 às 19:24
  • Editei a pergunta com 2` selects` na mesma row
    – Dobrychtop
    25/11/2017 às 19:26
  • @Dobrychtop resposta alterada.
    – Sam
    25/11/2017 às 19:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .