How to disable an option in a dropdown when one of the radiobuttons choices is selected?

  • 21 November 2019
  • 4 replies
  • 0 views

Badge +1

I have a radion button control with 2 options: "Option1" and "Option2". I also have a dropdown control with 3 choices: "Choice1", "Choice2", "Choice3".

When "Option1" is selected - all 3 dropdown choices should display. However, when "Option2" is selected only 2 - "Choice1" and "Choice2" should be displayed in the dropdown.

Can someone please assist how to resolve this using javascript?

I am using Nintex for Sharepoint 2013


4 replies

Userlevel 3
Badge +9
No need for JavaScript. Just us the technique with 2 drop-downs (that are connected to the same list column) and Rules to trigger which should be hidden/visible.

1) create a radio button control (called RadioAorB) with options A or B
2) create drop-down A (called DropdownA) with 3 choices with the Hidden property enabled
3) create drop-down B (called DropdownB) with 2 choices with the Hidden property enabled
4) create a Rule called "Is it A":
if RadioAorB equals A then
- DropdownA visible Yes
- DropdownB visible No
5) create a Rule called "Is it B":
if RadioAorB equals B then
- DropdownA visible No
- DropdownB visible Yes

Now when the form first appears only the radio button control is visible.
As soon as you select one of the two choices, either DropdownA or DropdownB will remain visible
Userlevel 6
Badge +22

@v-tmasenko Have you tested that solution?

My experience is if you connect two controls to the same column only one of the controls values will always be used so it will overwrite what ever is in the other control. Hidden or not it will not make a difference.

Badge +1
you are correct. this solution does not work. Plus, I need the drop down to be on the form at all times, only when first radio button is clicked, it should display all three choices and when other radio button is clicked, it should display only two choices
Badge +1

I was able to use the option with check box and use javascript to remove one of the choices in dropdown, but dont know how to use it with radio button:

NWF$(document).ready(function(){   NWF$('#'+chkBox).change(function() {      if(NWF$('#'+chkBox).prop("checked")) {
         //remove choices
      NWF$("#"+drpDownCtrl).find("option[value='Choice3']").remove();
      }
   })
}); 

Reply