Custom script to disable radio buttons depending on a selected one

Hey guys! Is it possible to extend that little script with a condition?

For example:

If I check Option 1 then Option 2 is disabled.

 

I'm not really into scripting, so I would be really grateful for your support!

Thank you!

I see you have two forms in your account, could you please provide us more information and details on how that specific field will be disabled? We can help you on customize a script BUT you'll need to embed your form's full source code and inject the custom script there.

We'll wait for your response.

Hey Charlie!

I deleted one of the forms in my account, by now there should be only one. The one I'm needing help with is called "Kirchendruckerei: Form Calculator".

Let's take the radiobutton-field called "Seitenanzahl innen" as example:

I'd like to disable various options when one of the options is set.

Something like this:

User checks Option called "8"

    > Options "12","16" and "20" get disabled

If the user changes the selected option I'd like to turn the disabled options back to enabled state.

Is this enough information? I hope I could explain it in a proper way :D

 

When the form becomes fully functional I'd like to embed it within Adobe Muse.

 

Thank you for the quick response and sorry for my bad english.

 

 

I believe this is possible ONLY if we'll use a custom script and inject it in your form's full source code. I'll try to look for an alternative and I'll get back to you soon as I have a working solution. Thank you for the additional details and information :)

Hi,

So here's the sample custom script that you would like to have. Here's my test website page using a cloned version of your form: https://shots.jotform.com/charlie/custom_script_thread785571/custom_script_disable_options.html 

Noticed that if you select radio button "8", it will disable radio button "12". If you select radio button "16", it will disable radio button "20". I have only setup 2 conditions.

To do this, here's what I did:

1. First, get your form's full source code and paste it on your favorite text editor.

2. Now copy this custom script that I have: http://pastebin.com/n9KDzHU5 

function disable_Options(c) {

// Get the list of radio options with class name form-radio

var radio = document.getElementsByClassName("form-radio");

 

// Check each class name radio button

    for(var i = 0; i < radio.length; i++) {

 

      //Set what specific conditions if an option is selected and list the ones that will be disabled.

      // radio[0] is selected then disable radio[1]

        if(radio[0].checked) {

          radio[1].disabled = true;

          radio[1].parentNode.style.opacity = "0.7";

        } 

      // if radio [2] is selected then disable radio[3]

        else if(radio[2].checked) {

          radio[3].disabled = true;

          radio[3].parentNode.style.opacity = "0.7";

        }

        else {        

         radio[i].disabled = false;

         radio[i].parentNode.style.opacity = "1";

       }

    }

}

You can create conditions on that custom script, noticed that I have 3 conditions on it.

Condition 1: IF radio[0] is checked, it means if the first radio it checked then disable radio[1], radio[1] is the second radio button. The index of radio buttons starts from 0 and not 1.

Condition 2: IF radio[2] is checked, it means if the 3rd radio it checked then disable radio[3], radio[3] is the 4th radio button.

Condition 3: If a radio button is not checked, then enable it and set the style of it to active state by increasing opacity to "1".

 

3. Now paste the custom script that you have at the end of your full source code, just before the </body> tag. Make sure to wrap your own custom script with <script></script> tags.

 

4. When to trigger this script? We want to trigger it when a radio button is selected. We will need to add this code to your input fields:

onDISABLEDchange="disabe_Options(this);"

Here's a screenshot showing mine, make sure to add that to all of your input radio buttons on that radio group.

5. Save the changes and upload your full source code with a custom script on it on your web server.

You now have a custom script that disables some radio buttons depending on a selected one. Let us know if  you need more help on this.

I noticed that there's a problem on my script, I have already updated it, you can get the updated one on the same pastebin link. Just in case you missed it. Here's the link: http://pastebin.com/n9KDzHU5 

Let us know if you have further questions.

Hey Charlie!

Thank you very much! This script is exactly what I was looking for :)

It's working fine and customizing turns out to be pretty easy.

If I encounter any issues I'll text you back.

 

Thanks again and great job!

Great to hear that it worked :) Should you need more assistance on this, please do feel free to let us know.

Thank you.