nuBuilder Forum

Posted: **Fri Jan 25, 2019 9:38 pm**

How can I make a checkbox readonly? Setting access to readonly doesn't work, This doesn't prevent ticking of the checkbox.

Posted: **Fri Jan 25, 2019 10:11 pm**

try in Javascript
nuDisable('but_nr3');

Posted: **Mon Jan 28, 2019 2:50 pm**

Arwen,

I had noticed the same issue with checkboxes (and a few other input types) and had, in fact, been thinking about posting a question. Janusz's fix does work but it involves extra coding, especially if the checkbox is in a subform. Also, I think that disabled and readonly are slightly different; the former prevents the object/element from getting focus, for example.

My personal view is that developers probably expect that setting the access property of a form object to 'readonly' would prevent edits to that object when the form is rendered regardless of input type. That would be consistent with the 'low code' approach. So I guess this is a request to Steven to have a look at this issue. I am sure he will have a good solution.

Thanks & regards,

Neil

Posted: **Thu Feb 21, 2019 12:23 pm**

I had another think about this and there is a (partial) solution that may address the problem. It seems that making checkboxes, and some other elements, readonly is not as straightforward as you may think. They can be disabled as indicated by Janusz and this may suffice. The key point about disabled status is that the value of the element will not be written back to the database when the form is saved, even if this value has been modified indirectly. So, if all you want to do is display an 'inert' value, this solution should work. It requires some changes to the nuBuilder files but these have no effect on existing code or configurations. (I am happy to be corrected on this if I have overlooked something.)

We can add 'Disabled' as an extra option for the Access property of an object. This done by running the following SQL update query.

Code: Select all

UPDATE `zzzzsys_object` SET `sob_select_sql` = '0|Editable|1|Readonly|2|Hidden|3|Disabled' WHERE `sob_select_sql` = '0|Editable|1|Readonly|2|Hidden';

and also modifying the function nuSetAccess() in nuform.js as follows to handle when r==3. (I have copied the complete function even though there are only three new lines).

Code: Select all

function nuSetAccess(i, r){
	if(r == 2){
		var o	= [i, i + 'code', i + 'button', i + 'description', 'label_' + i];
		for(var c = 0 ; c < o.length ; c++){
			$('#' + o[c])
			.attr('data-nu-tab', 'x')
			.hide();
		}
	}
	if(r == 1){
		nuReadonly(i);
	}
   if(r == 3){
		nuDisable(i);
	}
}

Of course, the changes have to be re-applied whenever nuBuilder is updated. That leads to a question for Steven. Could something like this be incorporated into a future release?
Thanks
Neil

Posted: **Thu Feb 21, 2019 3:25 pm**

Neil,

While I like your solution, disabled controls are not keyboard navigable and therefore fall foul of all accessibility legislation.

So here's another option which sets a checkbox readonly but still allows the control to get the focus. It also looks a little nicer than a "disabled" checkbox.

Focussed checkbox, readonly.

checkbox_focussed.png

Checkbox without focus, readonly.

checkbox_not_focussed.png

Code: Select all

function nuReadonly(i) { //-- set Edit Form Object to readonly

    var o = [i, i + 'code', i + 'button', i + 'description'];
	
    if($('#' + i).is(':checkbox')) {
        $('#' + i).on("click.readonly", function (event) { event.preventDefault(); }).css("opacity", "0.5");
    } else {
        for(var c = 0; c < o.length; c++) {
            $('#' + o[c])
                .addClass('nuReadonly')
                .attr('onclick', '')
                .prop('readonly', true);
        }
    }
	
}

If this function is pasted under Setup -> Header, it will replace the standard function and behaviour (new login required).
If it's going to be incorporated into a future release - in a way or another - It can be removed again.

Posted: **Thu Feb 28, 2019 12:05 pm**

kev1n,

Thanks for your interesting reply (and my apologies for taking so long to follow up). There is quite a lot in your reply that merits a careful response but let me deal with one point you make in particular.

disabled controls are not keyboard navigable and therefore fall foul of all accessibility legislation.

I hope you don't mind me saying but I think there is a danger here of being overly prescriptive without knowing the full context. On a web page static text and embedded images are not usually 'keyboard navigable' because they are inert. Only the elements that offer user interaction need to be reachable via the keyboard. The context in which I am wanting a 'display only' checkbox is a subform which displays a number of records related to the parent record. No editing is intended at all in this subform and so it does not permit deletion or addition. There are 5 fields used as identifiers for each record in the subform. One of these is a checkbox. A sixth object is an 'Open' button which will take the user to a new form displaying the full record (and this can be edited if the user has permission). This is the only object in each row that needs to have focus. In fact, if the other objects were to allow focus then the user has to tab through these read-only fields to reach the 'open' button. This is a poorer user experience as it involves many more key strokes than strictly necessary to navigate to the one active object. And I have found that allowing focus on objects that are not intended to be modified can cause confusion on the part of users.

Interestingly, the aspect that required a little work wrt accessibility is the need to identify which button has focus when using a keyboard for navigation. This was easy to resolve by adding a .nuButton:focus {} to the CSS.

I do agree that the 'muted' readability of the default disabled state is not ideal. Overall I guess what I am saying is that is useful to have a generic method of placing a jquery object on a web page so that it is 'display only'. It is then up to the person designing an application to ensure that the complete page complies with accessibility requirements.

Thanks again for the very useful code. It is always good to learn more about JavaScript and very much appreciated.

Neil

Posted: **Mon Oct 28, 2019 2:13 pm**

Thank you for your answers & suggestions! Does anyone know if this works in the current version?

Posted: **Wed Oct 30, 2019 9:56 am**

ARWEN wrote:Thank you for your answers & suggestions! Does anyone know if this works in the current version?

No - setting Access to Readonly doesn't show any effect.

Posted: **Fri Nov 01, 2019 6:13 am**

Guys,

This has been changed now.

The changes are now on Sourceforge.

Steven

nuBuilder Forum

access = readonly not working for checkboxes

access = readonly not working for checkboxes

Re: access = readonly not working for checkboxes

Re: access = readonly not working for checkboxes

Re: access = readonly not working for checkboxes

Re: access = readonly not working for checkboxes

Re: access = readonly not working for checkboxes

Re: access = readonly not working for checkboxes

Re: access = readonly not working for checkboxes

Re: access = readonly not working for checkboxes