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']");

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!

1 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

enter image description here

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

    if($(this).attr('title') == 'Dog' || $(this).attr('title') == 'Cat') {

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

  • Thank you SO much Amal; I am trying to follow this and will report back.
    – lebowski22
    Commented Jul 16, 2016 at 12:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.