CODEWITHSUNDEEP
javascripthtmljquery
user3386779
user3386779

Reputation: 7175

hide the checkbox based on value in jquery

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>

Upvotes: 0

Views: 130

Answers (4)

PeterKA
PeterKA

Reputation: 24638

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>

Upvotes: 0

RPDP
RPDP

Reputation: 1723

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>

Upvotes: 0

Zoran Stankovic
Zoran Stankovic

Reputation: 148

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>

Upvotes: 0

sjahan
sjahan

Reputation: 5950

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>

Upvotes: 2

Related Questions