Pinned topicNot able to disable dojo checkbox widgets

‏2012-12-11T07:07:01Z
|Tags:

Answered question
This question has been answered.

Unanswered question
This question has not been answered yet.

I want make the dojo widgets having class=myclass readonly.
For this i've written below js. This works fine for textbox, but not working for checkbox for the attached portlet Model.
However same function works well when used in a plain html file.

Attachments

Re: Not able to disable dojo checkbox widgets

‏2012-12-11T09:23:37Z

This is the accepted answer.
This is the accepted answer.

A quick search of the web for "HTML checkbox readonly" provides a lot of discussion about how specifying the readonly attribute on an input element with type="checkbox" does not keep the state of the checkbox from being changed. The W3C HTML spec (I looked at versions 4 and 5) also indicate that readonly is not a valid attribute for a checkbox.

I think you'll have to use a different strategy for checkboxes (actually for any inputs other than text and password.)

The content of this post is my own and does not necessarily represent the positions, strategies, or opinions of IBM.

While I haven't tried this before myself, and I probably would've tried to set an attribute in the generated html rather than via JS, there should be a way to make what you're trying to do work, so I tried a slight tweak to your JS which appears to work at first glance.

If you look at the view source of the HTML page in the browser, you'll note that WEF Page Automation turns your original HTML node into a span wrapper and then generates two input nodes within that (one for the visible HTML checkbox and another hidden one to hold the actual value to be submitted) to get around the ugly behavior of the HTML spec where checboxes do not submit a value if unchecked (WEF checkboxes submit a value whether checked or not).

Because of this, your search by class where you're looking for the class you put on the original HTML node is now trying to treat the span wrapper as the node that is the dijit, which it is not as you can see from the view source of the page and by inspect element on the checkbox itself (Dojo checbox sets the class attribute to dijitCheckBoxInput).

I changed your JS such that if it runs into one of your myclass nodes which is not itself a dijit, it searches within that node for a sub-node with class dijitCheckBoxInput, and if it finds a node with that class, it does a dijit.byId on that checkbox dijit node and then sets the readonly on that.

Here's your JS function with my (minor) tweaks. I can't guarantee this will do everything you want and I haven't had time to fully test it, so you will need to do that yourself and ensure that this is what you intend to do and that it works in all browsers you need to support. Another option is figuring out the page location of the generated html element that ends up with the dojoType for the checkbox and trying to set the readonly there via Attribute Setter builder.

Again, this is mostly your original code - my tweak/fix was just to how you're handling the case where the resulting myclass node isn't itself the dijit and again, this is just a suggestion that you will have to try/test/validate meets your need - I can't guarantee from here with limited knowledge of your app and its use cases and browser requirements whether this should be your final solution or if there might be a better way to do it (such as the attr setter):

I hope that info helps,
..Mike Burati
http://www-10.lotus.com/ldd/pfwiki.nsf/
The postings on this site are my own and do not necessarily represent the positions, strategies, or opinions of IBM.

While I haven't tried this before myself, and I probably would've tried to set an attribute in the generated html rather than via JS, there should be a way to make what you're trying to do work, so I tried a slight tweak to your JS which appears to work at first glance.

If you look at the view source of the HTML page in the browser, you'll note that WEF Page Automation turns your original HTML node into a span wrapper and then generates two input nodes within that (one for the visible HTML checkbox and another hidden one to hold the actual value to be submitted) to get around the ugly behavior of the HTML spec where checboxes do not submit a value if unchecked (WEF checkboxes submit a value whether checked or not).

Because of this, your search by class where you're looking for the class you put on the original HTML node is now trying to treat the span wrapper as the node that is the dijit, which it is not as you can see from the view source of the page and by inspect element on the checkbox itself (Dojo checbox sets the class attribute to dijitCheckBoxInput).

I changed your JS such that if it runs into one of your myclass nodes which is not itself a dijit, it searches within that node for a sub-node with class dijitCheckBoxInput, and if it finds a node with that class, it does a dijit.byId on that checkbox dijit node and then sets the readonly on that.

Here's your JS function with my (minor) tweaks. I can't guarantee this will do everything you want and I haven't had time to fully test it, so you will need to do that yourself and ensure that this is what you intend to do and that it works in all browsers you need to support. Another option is figuring out the page location of the generated html element that ends up with the dojoType for the checkbox and trying to set the readonly there via Attribute Setter builder.

Again, this is mostly your original code - my tweak/fix was just to how you're handling the case where the resulting myclass node isn't itself the dijit and again, this is just a suggestion that you will have to try/test/validate meets your need - I can't guarantee from here with limited knowledge of your app and its use cases and browser requirements whether this should be your final solution or if there might be a better way to do it (such as the attr setter):