hide the checkbox based on value in jquery

Question

I have the checkboxes with values leads,contacts and Blank and I want to hide the checkbox and lable with values Blank and Contacts I have tried as.but not able to hide the option.

 $('#relatedto input').val('Blank').hide(); $('#relatedto input').val('Contacts').hide();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='relatedto'> <label for="ms-opt-1"><input type="checkbox" title="Leads" id="ms-opt-1" value="Leads">Leads</label> <label for="ms-opt-1"><input type="checkbox" title="Contacts" id="ms-opt-1" value="Contacts">Contacts</label> <label for="ms-opt-1"><input type="checkbox" title="Blank" id="ms-opt-1" value="Blank">Blank</label> </div>

Answer 1

Your selectors have been adjusted, and you have to get the parent to hide both the label and the input inside it.

 $('#relatedto input[value="Blank"]').parent().hide(); $('#relatedto input[value="Contacts"]').parent().hide();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='relatedto'> <label for="ms-opt-1"><input type="checkbox" title="Leads" id="ms-opt-1" value="Leads">Leads</label> <label for="ms-opt-1"><input type="checkbox" title="Contacts" id="ms-opt-1" value="Contacts">Contacts</label> <label for="ms-opt-1"><input type="checkbox" title="Blank" id="ms-opt-1" value="Blank">Blank</label> </div>

Answer 2

You tried hiding input but label is not hidden so this is making you trouble. Please try this:

 $('#leads').hide(); $('#contacts').hide();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='relatedto'> <label id='leads' for="ms-opt-1"><input type="checkbox" title="Leads" id="ms-opt-1" value="Leads">Leads</label> <label id='contacts' for="ms-opt-1"><input type="checkbox" title="Contacts" id="ms-opt-1" value="Contacts">Contacts</label> <label id='blank' for="ms-opt-1"><input type="checkbox" title="Blank" id="ms-opt-1" value="Blank">Blank</label> </div>

Answer 3

You can use a direct selector or use the jQuery .filter() method as shown below, and the .closest() method to step back to the label element.

 $('#relatedto input').filter(function() { return ['Blank','Contacts'].includes( this.value.trim() ) }) .closest('label').hide();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='relatedto'> <label for="ms-opt-1"><input type="checkbox" title="Leads" id="ms-opt-1" value="Leads">Leads</label> <label for="ms-opt-1"><input type="checkbox" title="Contacts" id="ms-opt-1" value="Contacts">Contacts</label> <label for="ms-opt-1"><input type="checkbox" title="Blank" id="ms-opt-1" value="Blank">Blank</label> </div>

Answer 4

You can use attribute selector [attr=] to select the element and use parent() get the label and hide() it.

 $("#relatedto input[value='Blank']").parent().hide(); $("#relatedto input[value='Contacts']").parent().hide();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='relatedto'> <label for="ms-opt-1"><input type="checkbox" title="Leads" id="ms-opt-1" value="Leads">Leads</label> <label for="ms-opt-1"><input type="checkbox" title="Contacts" id="ms-opt-1" value="Contacts">Contacts</label> <label for="ms-opt-1"><input type="checkbox" title="Blank" id="ms-opt-1" value="Blank">Blank</label> </div>