How to enable or disable select nearest?

Question

I’m using Materialize CSS, I have a screen where I would like the Switch to be activated, the select the nearest becomes active so the user can select an option, and if the Switch goes back to inactive the select also return to idle state.

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);
        }
    });
});

I can already get the Switch value to know when to enable select and when to disable it, but I can’t find which the select nearest to change his state.

Are several selects I need to do this, so finding the one closest to the Switch and swapping out its value is essential.

Thank you in advance.

Answer 1

You will be able to select the element using:

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

Will get the div nearest that contains a select and select this select.

See working:

$(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>

Tip

To compare boolean values, you don’t need to do it the way if(filtro == true). Just do it like this: if(filtro).:

if(filtro == true) -> if(filtro)
if(filtro == false) -> if(!filtro)