How to enable or disable select closest?

Question

How to enable or disable select closest?

Navigation

#1 by (1 votes)

0

I'm using Materialize CSS, I have a screen where I would like the Switch to be activated, the closest select becomes active so the user can select an option, and if the Switch goes back to inactive the select also come back to the inactive 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 value of the Switch to know when to enable select and when to disable it, but I can not find the closest select to change its state.

There are several% w / w% I need to do this, so finding the nearest Switch and changing its value is essential.

Thank you in advance.

javascript html jquery

asked by anonymous 25.11.2017 / 19:32

1 answer

Error in captcha Repeat loop in ListView

score 1 · Accepted Answer

You will be able to select the element using:

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

It will fetch the nearest% of% containing a div and select that 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><formid="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 do not need to do the select form. Just do this: if(filtro == true) .:

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