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>

sjahan · Accepted Answer · 2020-09-29 15:16:16Z

2

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>

answered Sep 29, 2020 at 15:16

sjahan

5,9804 gold badges24 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zoran Stankovic · Accepted Answer · 2020-09-29 15:18:06Z

0

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>

answered Sep 29, 2020 at 15:18

Zoran Stankovic

1487 bronze badges

Comments

RPDP · Accepted Answer · 2020-09-29 15:26:14Z

0

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>

answered Sep 29, 2020 at 15:26

RPDP

1,7231 gold badge11 silver badges6 bronze badges

Comments

PeterKA · Accepted Answer · 2020-09-29 15:41:32Z

0

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>

edited Sep 29, 2020 at 15:41

answered Sep 29, 2020 at 15:20

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Collectives™ on Stack Overflow

hide the checkbox based on value in jquery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related