So deaktivieren Sie die ausgewählten Werte in OnClick-Taste

Question

Hier möchte ich tun, während onclick die Schaltfläche Ich möchte die Felder deaktivieren, und ich verwende Datenliste, in diesem Datalist nehme ich Marathahalli bedeutet, außer marathahalli bleiben alle Werte ich möchte uncheck machen, habe ich versucht, aber hier alle Werte unchecking, wie zu tun ist, wenn jemand weiß, Mittel bitte mein snippet

$('.options').on('change', function() { 
 
    var locality = $('#options option[value="' + $('#areaName').val() + '"]').data('id'); 
 
    $('#locality_id').val(locality); 
 
}).change(); 
 

 
$("#search1").click(function(){ 
 
     
 
    var localityId = $("#locality_id").val(); 
 

 
    if(localityId != ''){ 
 
     $('.myCheckbox').attr('checked', false); // Unchecks it 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<input list="options" type="name" class="form-control options" style="height: 34px; width: 100%;border-radius:0px;" name="areaName" id="areaName" placeholder="Locality" rel="" value=""> 
 

 
<datalist id="options"> 
 

 
<option data-id="1" value="Marathahalli"></option> 
 

 
<option data-id="2" value="Silk Board"></option> 
 

 
<option data-id="3" value="Jaya Nagar"></option> 
 

 
<option data-id="5" value="Kadubeesanahalli"></option> 
 

 
<option data-id="6" value="Bellandur"></option> 
 

 
<option data-id="7" value="Kundalahalli"></option> 
 

 
<option data-id="8" value="JP nagar"></option> 
 
\t \t \t \t </datalist> 
 
<input type="hidden" name="localityId" id="locality_id" value=""> 
 

 
<button id="search1" type="button">Click Me!</button> 
 

 

 
<form id="filterForm"> 
 
    
 
     <ul style="padding-left: 0px;"> 
 
           
 
     <li><label class="space"><input type="checkbox" name="localityId" value="1" checked="" onclick="myFunction()" class="myCheckbox">Marathahalli</label></li> 
 
        
 
     <li><label class="space"><input type="checkbox" name="localityId" value="2" checked="" onclick="myFunction()" class="myCheckbox">Silk Board</label></li> 
 
        
 
     <li><label class="space"><input type="checkbox" name="localityId" value="3" checked="" onclick="myFunction()" class="myCheckbox">Jaya Nagar</label></li> 
 
        
 
     <li><label class="space"><input type="checkbox" name="localityId" value="5" checked="" onclick="myFunction()" class="myCheckbox">Kadubeesanahalli</label></li> 
 
        
 
     <li><label class="space"><input type="checkbox" name="localityId" value="6" checked="" onclick="myFunction()" class="myCheckbox">Bellandur</label></li> 
 
        
 
     <li><label class="space"><input type="checkbox" name="localityId" value="7" checked="" onclick="myFunction()" class="myCheckbox">Kundalahalli</label></li> 
 
        
 
     <li><label class="space"><input type="checkbox" name="localityId" value="8" checked="" onclick="myFunction()" class="myCheckbox">JP nagar</label></li> 
 
    </ul> 
 

 
     
 
    
 
</form>

Answer 1

Dies geschieht aktualisieren, da Sie ausdrücklich alle von ihnen sind Kennzeichnung als unchecked und nicht filtern. Sie haben den Code geändert.

$('.options').on('change', function() { 
 
    var locality = $('#options option[value="' + $('#areaName').val() + '"]').data('id'); 
 
    $('#locality_id').val(locality); 
 
}).change(); 
 

 
$("#search1").click(function(){ 
 
     
 
    var localityId = $("#locality_id").val(); 
 

 
    if(localityId != ''){ 
 
     $('.myCheckbox').each(function() { 
 
      if (localityId === $(this).val()) { 
 
      $(this).attr('checked', true); 
 
      } else { 
 
      $(this).attr('checked', false); 
 
      } 
 
     }) 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<input list="options" type="name" class="form-control options" style="height: 34px; width: 100%;border-radius:0px;" name="areaName" id="areaName" placeholder="Locality" rel="" value=""> 
 

 
<datalist id="options"> 
 

 
<option data-id="1" value="Marathahalli"></option> 
 

 
<option data-id="2" value="Silk Board"></option> 
 

 
<option data-id="3" value="Jaya Nagar"></option> 
 

 
<option data-id="5" value="Kadubeesanahalli"></option> 
 

 
<option data-id="6" value="Bellandur"></option> 
 

 
<option data-id="7" value="Kundalahalli"></option> 
 

 
<option data-id="8" value="JP nagar"></option> 
 
\t \t \t \t </datalist> 
 
<input type="hidden" name="localityId" id="locality_id" value=""> 
 

 
<button id="search1" type="button">Click Me!</button> 
 

 

 
<form id="filterForm"> 
 
    
 
     <ul style="padding-left: 0px;"> 
 
           
 
     <li><label class="space"><input type="checkbox" name="localityId" value="1" checked="" onclick="myFunction()" class="myCheckbox">Marathahalli</label></li> 
 
        
 
     <li><label class="space"><input type="checkbox" name="localityId" value="2" checked="" onclick="myFunction()" class="myCheckbox">Silk Board</label></li> 
 
        
 
     <li><label class="space"><input type="checkbox" name="localityId" value="3" checked="" onclick="myFunction()" class="myCheckbox">Jaya Nagar</label></li> 
 
        
 
     <li><label class="space"><input type="checkbox" name="localityId" value="5" checked="" onclick="myFunction()" class="myCheckbox">Kadubeesanahalli</label></li> 
 
        
 
     <li><label class="space"><input type="checkbox" name="localityId" value="6" checked="" onclick="myFunction()" class="myCheckbox">Bellandur</label></li> 
 
        
 
     <li><label class="space"><input type="checkbox" name="localityId" value="7" checked="" onclick="myFunction()" class="myCheckbox">Kundalahalli</label></li> 
 
        
 
     <li><label class="space"><input type="checkbox" name="localityId" value="8" checked="" onclick="myFunction()" class="myCheckbox">JP nagar</label></li> 
 
    </ul> 
 

 
     
 
    
 
</form>