How do I hide specific check boxes using JQuery?

Question

I am trying to learn JQuery to customise the way forms are displayed in SharePoint (in particular, to hide/show the options available in choice fields). I have managed to hide options/values within a dropdown list using the following code:

var dropdown = $(":input[title='Pets']");
dropdown.find('option:contains(Dog)').hide();
dropdown.find('option:contains(Cat)').hide();

I am stuck as to how to extend this to check boxes. So if I have a choice column (check box type) called "Pets" and check box options, "Dog", "Cat", and "Fish", but want to hide the "Dog" and "Cat" checkboxes (and of course the labels) from the form, allowing only "Fish" to be selected, how do I do this?

Would it also be possible to pre-select/check the "Fish" check box and disable/grey out?

Help would be really appreciated - have spent days trying to figure out what will clearly be basic for most users on this board. Thanks!

Answer 1

You should start using browser Dev tools. Using that inspect the element which shows you how it is rendered in HTML. What all attributes it has.

Once you have this information, you can use appropriate jQuery selector to select the object and apply your logic (hide/show etc.)

For example below screen the field name is "FieldName" and you can see the checkboxes are rendered inside a table.. and each checkbox is rendered inside a span

Now for selecting dog the logic is select table which has ID starts with "FieldName".. and select span which has title equals Dog.. something like

$('table[Id^="FieldName"]').find('span').each(function(){
    if($(this).attr('title') == 'Dog' || $(this).attr('title') == 'Cat') {
        $(this).hide();
    }
});

Note - The above code is pseudo code I haven't tested it. Check the HTML generated in your case and modify it as required.