Disable Choice Field Drop Down Values from being selected

C
Badge +6

I have a bunch of independent Choice Fields.  Users are required to select an option that is respective of the status of the request...'New', 'In Process', 'Awaiting Final Approval', 'Complete'.  I need to disable the user from being able to select 'Complete'.  I need to keep 'Complete' as an option, as I have a workflow that checks if specific conditions are met (other fields in the form to be populated with a value), and will change the status to 'Complete' when those conditions are met.

How can I disable an option from the Choice field so it cannot be selected by a user?

27 replies

P
Userlevel 4
Badge +12

Hi Christine,

there is no builtin way to achive this. In classic forms you could go with javascript to disable single options but this is not available in the responsive forms designer. Also personally I don't find implementations like these intuitive for the user.

Would it be possible to let the workflow moderate the field? You could set the control to display only in the form and have the workflow change status from one status to another as it walks through its actions.

Like instead of manually changing the status from "In Process" to "Awaiting final approval" the workflow can set the status before it requests the approval or when a specific button ("request approval"?) is hit in the form.

Would that be an option?

Best regards

Enrico

C
Badge +6

Hi Enrico,

Thank you for your feedback.  We are using the classic form, and we have 2 sets of users using the form.  External users and internal users.  The internal user, will be required to select the different statuses as they process through the request, but we do not want them to be able to select 'Complete'.  We will have a workflow check different items that are required to be filled in, and once everything is filled in, then the workflow will mark the status as 'Complete'.  Our initial thought was to remove the 'Complete' status so it did not even appear, but then you would not know when the request was Completed.  Additionally, our statuses are used as Radio buttons, so they all appear at the same time on the form.  Is there JavaScript that could be added to the field on the form that could disable the 'Complete' status radio button from being able to be selected?  What is the JavaScript code to do this, and where would this code get loaded onto the form?

Thank you,

Christine

E
Userlevel 5
Badge +14

have a look on this post how to disable single radio option with CSS

https://community.nintex.com/message/82154-re-hide-a-radio-button-choice-through-javascriptcss?commentID=82154#comment-8… 

C
Badge +6

Thank you, Marian!

A few questions with that post (I believe that should do the trick).  Where do I put that coding?

Would you be able to explain the different sections to the coding below?  What do I overwrite with my specific information?

.MyChoice table.nf-choice-radio tr:nth-of-type(3) {
    display: none !important;
}

The below 3 screen shots are of one of my Choice fields in which I would need to 'disable' an option.  The option I want to disable is 'Complete'.   There are 8 options in total for this field.  I have 7 Choice fields in total in which I would need to disable the 'Complete' option.

Thank you!!!

E
Userlevel 5
Badge +14
Where do I put that coding?

forms setting >> custom css

or save to a separate file and place reference to the file in forms settings >> advanced >>Custom CSS includes

Would you be able to explain the different sections to the coding below? 

.MyChoice - identifies a control you want to change via a custom class

table.nf-choice-radio - identified a table that makes up a set of radio options of a above referenced control

tr:nth-of-type(3) - identifies 3rd row of a table referenced above

display: none !important; - configure 'display' style of table row referenced above to 'none'

 I have 7 Choice fields in total in which I would need to disable the 'Complete' option.

is 'Complete' option always on the same position?

if so, then above will perfectly work. just append for each choice control to 'CCS class" custom class 'MyChoice' (separated by a space)

C
Badge +6

The 'Complete' option is not always in the same position.  The different Choice Controls do not always have the same number of choices so, would I need to add in this set of code for each Choice control? 

Example using the BAA status Choice control from above post:

.BAAStatus BAAStatus.nf-choice-radio tr:nth-of-type(7) {
    display: none !important;
}

BAA Status has 8 different Choice options.  'Complete' is the 7th option for this particular Choice control.

Would I just need to update the items above in Bold for each Choice control field?

Thank you so much for all your help!!!

E
Userlevel 5
Badge +14

would I need to add in this set of code for each Choice control? 

yes.

.... yes, if you'd like to go with pure CSS solution

selector will however look like

.BAAStatus table.nf-choice-radio tr:nth-of-type(7)‍‍

 

in that case, of course, each control will have to have different class, and you have to address different rows.

but with so many controls javascript approach would more efficient, and will not need to be changed with every additional choice control added

the code might look like

NWF.FormFiller.Events.RegisterAfterReady(function(){
    NWF$('.MyChoice table.nf-choice-radio input[value="Completed"]').closest('tr').hide();
})‍‍‍‍‍‍‍‍‍‍‍‍‍

in this case, add the same class (eg. MyChoice) to the each choice control where you want to hide 'Completed' option from.

C
Badge +6

Hi Marian,

Please see below screen shots.  Did I setup everything correctly?  It is not working, 'Complete' is still visible and able to be selected.

Thank you!

E
Userlevel 5
Badge +14

no that's not correct.

into choice's 'CSS class' field append just 'BAAStatus' separated by a space from rest list of classes being already there (with no dot in front, and with no quotes)

then if you're implementing CSS solution, add CSS style definition into forms settings >> custom CSS.

if you're implementing javascript solution, add javascript from above into forms settings >> custom javascript

C
Badge +6

ok, sorry...still learning over here.  Thank you for being so patient with me.

I have done the following, but the field is still showing as available, and can be selected in the dropdown.

E
Userlevel 5
Badge +14

above you've asked for...

...our statuses are used as Radio buttons, so they all appear at the same time on the form.  Is there JavaScript that could be added to the field on the form that could disable the 'Complete' status radio button from being able to be selected?

so I provided a solution for radio buttons.

but your above screenshots shows dropdown list....

C
Badge +6

Some of our statuses are radio buttons, those have less than 5 options.  Other statuses, which have 5 or more options, are shown as drop down.  We need both sets to be able to show the 'Complete' as disabled.

I will try the solution you provided for our statues which have radio buttons.  What is a solution for the drop down statues?

Thank you!

C
Badge +6

Please see below screen shots.  I updated the Custom CSS for one of the statuses which shows the Choice options as Radio buttons.

It is still not disabling the correct status.

'Received' is not disabled, even though it is the 3rd option.

Thank you.

E
Userlevel 5
Badge +14

as explained above, "tr:nth-of-type(3)" means 3rd row of (table of) radio options. not 3rd option.

you only have 2 rows of options...

if you configed options in a single column it would work

C
Badge +6

Gotcha.  Having options in a single column will not work for our form layout.  Is there a way to disable a status option by specifying the status option you want disabled, for any type of Choice control?

Thank you,

E
Userlevel 5
Badge +14

you can disable single radio option with javascript code like

NWF.FormFiller.Events.RegisterAfterReady(function(){
    NWF$('.ECRIStatus table.nf-choice-radio input[value="Received"]').prop('disabled',true);
})‍‍‍‍‍‍
C
Badge +6

Hi Marian,

I got them both working!!!!  I didn't realize that in the control I had to put the names into the CSS Class field!

So this is documented for other users, please see below screen shots of my final code and solution!

Thank you so much, Marian, for all your help and patience!!!

Now to figure out how to disable Choice options in Drop Down selections!

C
Badge +6

I have figured out how to disable options in Choice Drop Down fields.

The code is very similar to the above that I used.

NWF$('.BAAStatus option[value="Complete"]').prop('disabled',true);

Again, I had to add BAAStatus onto the Control in the CSS class field.

It successfully disabled 'Complete' in the drop down.  Please see screen shots below.

As you can see 'Complete' is greyed out, and cannot be selected.

Thank you!!! happy.png wink.pnghappy.png

E
Userlevel 5
Badge +14

great!

so select and mark the post that answered your question as correct to close the thread.

C
Badge +6

Thank you again so much for all your help and patience! happy.png

L
Badge +2

Team/Christine,

Having a similar scenario. Problem is that I mirrored what you did for multiple choice fields and the values are not disabled even after copying line for line what your solution showed above. Fields have a point value, 0 value, and a Report value in each field, not necessarily same order.

IE:

12

0

Report

Here is what I have for the form custom javascript settings:

NWF.FormFiller.Events.RegisterAfterReady(function(){
NWF$('.Test1option[value="16"]').prop('disabled',true);
NWF$('.Test2 option[value="14"]').prop('disabled',true);
NWF$('.Test3 option[value="12"]').prop('disabled',true);
NWF$('.Test4 option[value="16"]').prop('disabled',true);
NWF$('.Test5 option[value="16"]').prop('disabled',true);
NWF$('.Test6 option[value="16"]').prop('disabled',true);
NWF$('.Test7 option[value="10"]').prop('disabled',true);
})

in CSS class for each control I added value of Test1  or corresponding value of each control. (if Test 1, then I added Test1    if Test 2 then I added Test2  to whatever CSS classes were already there just like above screenshots

Seems pretty straight forward  but nothing is grayed out in the values when selecting from drop-down.

Any Help is appreciated, Thank you!

L

C
Badge +6

I'm trying to understand your scenario. 

Tes1, Test2, Test3, etc...they are all different Choice fields on your form?  Are they all drop downs?  Do you have any that are radio buttons?

What Choice options should display in your drop downs?  I'm seeing multiple scenarios above where the same value is trying to be disabled.

Please post a screen shot of your form, and possibly the setup of you different Choice fields (Test1, Test2, Test3, etc.)

L
Badge +2

Hi Christine! They're all dropdowns (probably biggest difference from your scenario but looked easy enough using the code you provided). I got the CSS to work in a different browser but it won't work in IE11. Still can't get the javascript to work. 

Test 1 is now TicketTrouble_Rating

  • Dropdown field
  • CSS Class is TicketTroubleRating
  • IE 11
  • Nintex Forms 2016
  • Javascript added to customer javascript area in form settings

Field values are : 

12

0

Dispute

If the item has a 0 for this field, the field shows up. They can choose dispute. I do NOT want them choosing 12. It needs to be there though since item is copied over from different list per a workflow and can sometimes be a the 12 value.

My other fields are all dropdowns and similar in values but the full number value sometimes changes.

for TicketAccuracy_Rating the value I don't want them to select is 16:

16

0

Dispute

Javascript is here: 

NWF.FormFiller.Events.RegisterAfterReady(function(){
NWF$('.TicketCompAccRating option[value="16"]').prop('disabled',true);
NWF$('.TicketTroubleRating option[value="12"]').prop('disabled',true);.

This should work but is not for some reason..... What did I miss?

Using CSS works in Chrome but not in IE 11. and the values I don't want just don't show at all - which is ok. (seems to be an issue with Display: None per google search.

Development Site

CSS

.TicketTroubleRating option[value="12"] {display: none !important;}
Hope this makes more sense.
Thank you!
L
C
Badge +6

After comparing your setup with how my form is setup, I am not seeing any differences.

The only thing I could suggest that would be causing it to not work, would be due to the fact that those fields are being pre-populated with value from another list.

Have you tested with not pre-populating the data fields from another list?

B
Badge +9
Is there a way to hide instead of disabling using JavaScript as below:

NWF$('.Status option[value="Approved"]').prop('disabled',true);
NWF$('.Status option[value="Rejected"]').prop('disabled',true);

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings