Multiple-selection check box with single-select behaviour OR can you style a radio button to look like a checkbox?


Badge +10

Hi folks,

I have the following problem:

I have a choice field with check-boxes:

200571_pastedImage_1.png

but only one option should be possible (single select!). 

I found a solution for that using CSS but there is no MS support for that:
http://jsfiddle.net/mq8Zq/

So I guess I need JavaScript but unfortunately I am struggling with the code.

Is there anyone able to help?

Cheers,

mai-kel


14 replies

Badge +7

Dear, 

In the setting of the choice control add a custom css class to the "CSS class" setting (See attached image-Named here "CheckBoxCSS").

Then add the below client side code to the "Custom JavaScript" section in the form settings:

NWF$(document).ready(function () {
   NWF$(".CheckBoxCSS").find("input").change(function () {
   if (NWF$(this).prop("checked")) {
         NWF$(".CheckBoxCSS").find("input").not(this).prop("checked", false).trigger("change");
}
});
}); 

Cheers happy.png...

Userlevel 5
Badge +14

if you changed sharepoint list field settings to 'radio buttons' it would render as radio switch with just single option selected and you wouldn't need any javascript.

Badge +7

Dear ‌.

If the choice control is already connected to checbox(multi-selection) column, the change in the settings is not possible unless changing the settings of the column itself in SharePoint list/library.

Userlevel 5
Badge +14

fully agree.

therefore I've written:

if you changed sharepoint list field settings to 'radio buttons'

Badge +7

happy.png

Userlevel 5
Badge +12

I  do agree with the radio button approach, generally speaking radio buttons signal a single choice among many options, whereas checkbox usually indicates multiple among multiple options.

Badge +7

Dear Mike Matsako‌,

May you want to keep the look and feel as a checkbox and the functionality as radio buttons.

Userlevel 5
Badge +12

It sounds like that is what the user wants and there is nothing wrong with that, but from a general forms standpoint, radios are singular, and checkboxes indicate multiple selection in most systems.  I do believe you have solved his request though.  

Badge +10

I fully agree. Not only that I won't need to have any javascript, but I would also obey an internet standard (and to be honest there aren't that much standards which someone can really rely to within the internet).

BUT customers wants it, customer is willing to pay for it, customer has no flexibility at all to change his mindset here (it's a German public authority).

I am really not happy to do so, but at the end "the customer is always right". 

Badge +10

Dear Philip,

Exactley what I needed - wicked! grin.png 

Thanks a lot!

Cheers mai-kel

Badge +16

‌ glad you have a solution.  Please use the "mark correct" button to close out this thread.  happy.png

Badge +10

Sorry. Done now.

Userlevel 5
Badge +12

I know exactly how that is! happy.png  Customer is king.  Glad the solution worked for you.

Badge

Hi, the solution you posted works great for "one check box object" on a form page. I am wondering how to adjust the script to treat "each check box object" independently from the other Check Box Objects on the same form (document). For example, I have the following in a NINTEX Panel and only want the initial user to select one box from each input item:

Reply