Smarty / Dojo checkbox onCheck uncheck other checkbox

Question

I am using Dojo labels and checkboxes in one of my app inside smarty file. I want to add a certain behavior to uncheck a checkbox, if any other checkbox is checked. I also check if that checkbox is originally checked, it will uncheck the same. (I do not want to use radio button)

Here is my code for one CheckBox:

<input id="form.cs"
     data-dojo-type='dijit.form.CheckBox'
     type="checkbox"    
     data-dojo-props="value:'true', type:'checkbox', name:'cs', style:'vertical-align: top'"
     onChange="if(dijit.byId('form.cs"').checked)                             
                  dijit.byId('form.cs"').set('checked', false);
               else 
                  dijit.byId(' form.nl"').set('checked', false);"
/>

The problem with code is when i add curly braces, this is not rendered by smarty engine and throws error.

For example :

onChange="if(dijit.byId('form.cs"').checked) {                         
                  dijit.byId('form.cs"').set('checked', false); }
               else {
                  dijit.byId(' form.nl"').set('checked', false);"}

The above code snippet will create a breakdown in the smarty.

Answer 1

I recommend writing your event handler in JavaScript. If you're going to write all your event handlers as attributes you're going to have a lot of problems like code validation, ... .

You could write a loop that actually loops over all checkboxes, setting the value to the opposite of the changed value (so if one checkbox becomes true, the other ones must become false).

To do this you could write a simple function like this:

var toggleCheckboxes = function(myNode, value) {
    query("input[type=checkbox]").forEach(function(node) {
        if (node !== myNode) {
            registry.getEnclosingWidget(node).set("value", !value, false);
        }
    });
};

The dojo/query module allows you to get a list of all nodes matching the given selector. With the dijit/registry module you can retrieve the actual widget behind the DOM node and then you just set the value using:

registry.getEnclosingWidget(node).set("value", !value, false);

The third parameter (set to false) is actually very important. This parameter will prevent further event invocations. If you don't put that parameter there it will actually trigger another onChange, causing an infinite loop.

Now the only thing you need to do is bind an onChange event handler to each checkbox that calls this function, you can also to that with the dojo/query and dijit/registry module, for example:

query("input[type=checkbox]").forEach(function(node) {
    registry.getEnclosingWidget(node).on("change", function(value) {
       toggleCheckboxes(node, value);
    });
});

A complete example can be found on JSFiddle.

---

But I still recommend using a radiobutton. I think you can actually say this is a bad UI design, a checkbox and a radiobutton have different goals, use them for what they're meant to.