Disabling Multiple Form Fields When Checkbox is Checked

SOLVE
Highlighted
Top Contributor

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?

Reply
0 Upvotes
2 Accepted solutions

Accepted Solutions
Highlighted
Solution
Top Contributor

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.


Jacob Lett
Marketing Consultant
Strategic marketing consultant and skilled web designer specializing in the manufacturing industry to increase revenue through driving website leads and brand awareness.

View solution in original post

Highlighted
Solution
Top Contributor

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

 

$(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);
  }
});

View solution in original post

4 Replies 4
Highlighted
Top Contributor

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

 

load script after the form has loaded - https://legacydocs.hubspot.com/global-form-events


Jacob Lett

Freelance HubSpot CMS Developer & Web Designer


bootstrapcreative-horizontal-trim.png

Located in Michigan, USA

Get a free estimate now 


Jacob Lett
Marketing Consultant
Strategic marketing consultant and skilled web designer specializing in the manufacturing industry to increase revenue through driving website leads and brand awareness.

Highlighted
Top Contributor

Hey @BootstrapC, 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.

Reply
0 Upvotes
Highlighted
Solution
Top Contributor

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.


Jacob Lett
Marketing Consultant
Strategic marketing consultant and skilled web designer specializing in the manufacturing industry to increase revenue through driving website leads and brand awareness.

View solution in original post

Highlighted
Solution
Top Contributor

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

 

$(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);
  }
});

View solution in original post