# Disabling Multiple Form Fields When Checkbox is Checked

**URL:** <https://community.hubspot.com/t/disabling-multiple-form-fields-when-checkbox-is-checked/24129>\
**Category:** CMS Development\
**Tags:** forms\
**Created:** [August 12, 2020, 7:51pm UTC](https://community.hubspot.com/t/disabling-multiple-form-fields-when-checkbox-is-checked/24129 "2020-08-12T19:51:33Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alejandro](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alejandro/32/8032_2.png) [@Alejandro](https://community.hubspot.com/u/Alejandro)\
**Post date:** [August 12, 2020, 7:51pm UTC](https://community.hubspot.com/t/disabling-multiple-form-fields-when-checkbox-is-checked/24129/1 "2020-08-12T19:51:33Z")

</div>

Hi All,

I can’t, for the life of me, figure this part of my form out. I have 3 fields that I want to be disabled when a specific box is checked and I haven’t had any luck with any docs or community posts being able to solve this issue. Can anyone help with this?

---

<div class="post-metadata">

**Author:** ![Jake\_Lett](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jake_lett/32/45178_2.png) [@Jake\_Lett](https://community.hubspot.com/u/Jake_Lett)\
**Post date:** [August 13, 2020, 8:31am UTC](https://community.hubspot.com/t/disabling-multiple-form-fields-when-checkbox-is-checked/24129/2 "2020-08-13T08:31:03Z")

</div>

This would require some custom javascript after the form is loaded.

Reference on writing a custom script behavior - [https://stackoverflow.com/questions/22763965/jquery-to-disable-checkbox-if-another-is-checked](https://stackoverflow.com/questions/22763965/jquery-to-disable-checkbox-if-another-is-checked)

load script after the form has loaded - [Accounts Dashboard | HubSpot](https://legacydocs.hubspot.com/global-form-events)

* * *

**Jacob Lett**

[Freelance HubSpot CMS Developer & Web Designer](https://bootstrapcreative.com/hubspot-designer/?utm_source=HubSpotCommunity&utm_term=tagline)

[  
  ![28844i368E9AAC739341A8.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/0/0fa6bcd420e080a29fc75d42359cf2879b6e162d.png)  
 ](https://bootstrapcreative.com/hubspot-designer/?utm_source=HubSpotCommunity&utm_term=logo)

Located in Michigan, USA

[**Get a free estimate now ›**](https://bootstrapcreative.com/contact-us/?utm_source=HubSpotCommunity&utm_term=free%20estimate)

---

<div class="post-metadata">

**Author:** ![Alejandro](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alejandro/32/8032_2.png) [@Alejandro](https://community.hubspot.com/u/Alejandro)\
**Post date:** [August 13, 2020, 2:14pm UTC](https://community.hubspot.com/t/disabling-multiple-form-fields-when-checkbox-is-checked/24129/3 "2020-08-13T14:14:38Z")

</div>

Hey [@Jake\_Lett](https://community.hubspot.com/t5/user/viewprofilepage/user-id/72866), thanks for replying. I’m confused; will the script not work without event listeners? I’m still learning js and consider myself at the very, very begginer stage.

---

<div class="post-metadata">

**Author:** ![Jake\_Lett](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jake_lett/32/45178_2.png) [@Jake\_Lett](https://community.hubspot.com/u/Jake_Lett)\
**Post date:** [August 13, 2020, 2:25pm UTC](https://community.hubspot.com/t/disabling-multiple-form-fields-when-checkbox-is-checked/24129/4 "2020-08-13T14:25:04Z")

</div>

Hi Alex. Good question. The listeners are important because it gives you confidence the form is on the page. Sometimes things load faster than others and you can run code dependent on something that is not fully loaded in the page. So you get bugs where it works sometimes and breaks other times.

If you are new to javascript, make sure you learn the difference between document ready, on window load, dom inserted, timeout, and callbacks. All of these things determine when your javascript will file and you will often want control on when that happens.

---

<div class="post-metadata">

**Author:** ![Alejandro](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alejandro/32/8032_2.png) [@Alejandro](https://community.hubspot.com/u/Alejandro)\
**Post date:** [September 8, 2020, 5:43pm UTC](https://community.hubspot.com/t/disabling-multiple-form-fields-when-checkbox-is-checked/24129/5 "2020-09-08T17:43:05Z")

</div>

Got the form working a few weeks ago and wanted to share the code for others wanting to do the same thing:

```lia-code-sample
$(document).on('change', 'input[name="field_name"]', function() {
 if($('input[name="field_name"]').prop('checked')){
 $('input[name="field_name"]').attr('disabled', true);
 $('input[name="field_name"]').attr('disabled', true);
 $('input[name="field_name"]').attr('disabled', true);
 $('.hs_field_class').css('opacity', 0.6);
 $('.hs_field_class').css('opacity', 0.6);
 $('.hs_field_class').css('opacity', 0.6);
 $('input[type="radio"]').prop('checked', false);
 } else {
 $('input[name="field_name"]').attr('disabled', false);
 $('input[name="field_name"]').attr('disabled', false);
 $('input[name="field_name"]').attr('disabled', false);
 $('.hs_field_class').css('opacity', 1.0);
 $('.hs_field_class').css('opacity', 1.0);
 $('.hs_field_class').css('opacity', 1.0);
 }
});

```

---

<div class="post-metadata">

**Author:** ![nlafakis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nlafakis/32/16975_2.png) [@nlafakis](https://community.hubspot.com/u/nlafakis)\
**Post date:** [November 22, 2021, 4:31pm UTC](https://community.hubspot.com/t/disabling-multiple-form-fields-when-checkbox-is-checked/24129/6 "2021-11-22T16:31:49Z")

</div>

Hey Alex!,

Do you happen to have a jsfiddle of this, or maybe a codepen example? I’ve tried this code in my form and replaced the proper parts of it, but it breaks the form and doesn’t dispay anything.

Edit:

Here’s the fiddle I’m working with that has a test form in it - [Locking the checkbox of a HS form - JSFiddle - Code Playground](https://jsfiddle.net/nlafakis/mh67kbcg/232/)

---

<div class="post-metadata">

**Author:** ![SB21](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sb21/32/87988_2.png) [@SB21](https://community.hubspot.com/u/SB21)\
**Post date:** [June 9, 2021, 2:00pm UTC](https://community.hubspot.com/t/disabling-multiple-form-fields-when-checkbox-is-checked/24129/7 "2021-06-09T14:00:35Z")

</div>

HI,

I got a query on hubspot Landing page. I have got 5 check boxes in a landing page. If i check the last one all other opted must be unchecked and and if any of the first 4 is checked the last one must be un checked.

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [June 10, 2021, 1:15pm UTC](https://community.hubspot.com/t/disabling-multiple-form-fields-when-checkbox-is-checked/24129/8 "2021-06-10T13:15:31Z")

</div>

@SB21 , what is the issue?

---

<div class="post-metadata">

**Author:** ![SB21](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sb21/32/87988_2.png) [@SB21](https://community.hubspot.com/u/SB21)\
**Post date:** [June 10, 2021, 1:32pm UTC](https://community.hubspot.com/t/disabling-multiple-form-fields-when-checkbox-is-checked/24129/9 "2021-06-10T13:32:35Z")

</div>

HI

I am new to hubspot and i have got a query in landing pages.

I have got 5 check boxes in a landing page. If i check the last checkbox all other opted must be unchecked and if any of the first 4 is checked the last one must be un checked.

EX: Like a Preference form. If thy click optout all their subscriptions must be unchecked and vice versa.

 ![SB21_0-1623331936844.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/5/9/59f2ba037805558e07bbe631062c427043cbdbd9.png)

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [June 10, 2021, 1:56pm UTC](https://community.hubspot.com/t/disabling-multiple-form-fields-when-checkbox-is-checked/24129/10 "2021-06-10T13:56:30Z")

</div>

[@Alejandro\_](https://community.hubspot.com/t5/user/viewprofilepage/user-id/115716) should be applicable to your use case. You will need to replace the the name to be whatever the name of your input field is, though.

---

<div class="post-metadata">

**Author:** ![SB21](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sb21/32/87988_2.png) [@SB21](https://community.hubspot.com/u/SB21)\
**Post date:** [June 10, 2021, 2:13pm UTC](https://community.hubspot.com/t/disabling-multiple-form-fields-when-checkbox-is-checked/24129/11 "2021-06-10T14:13:20Z")

</div>

Thanks. Do we need to add that at Additional code snippets of Landing page @alex @dennisedson . I tried by adding it there but it dint work.

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [June 10, 2021, 3:23pm UTC](https://community.hubspot.com/t/disabling-multiple-form-fields-when-checkbox-is-checked/24129/12 "2021-06-10T15:23:17Z")

</div>

@SB21 , you would need to add it to your module js. That code requires jquery so make sure that is also loaded.

You should also consider posting a link to your page with an example of this as well as the exact code you are using

---

<div class="post-metadata">

**Author:** ![SB21](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sb21/32/87988_2.png) [@SB21](https://community.hubspot.com/u/SB21)\
**Post date:** [June 28, 2021, 2:31pm UTC](https://community.hubspot.com/t/disabling-multiple-form-fields-when-checkbox-is-checked/24129/13 "2021-06-28T14:31:15Z")

</div>

Can we schedule form submissions to deliver to the inbox directly on a daily basis in hubspot ?
