Question

我在智能文件中的一个应用程序中使用Dojo标签和复选框。如果选中任何其他复选框，我想添加某个行为以取消选中复选框。我还检查最初是否选中该复选框，它将取消选中相同的复选框。（我不想使用单选按钮）

这是我的一个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);"
/>

代码的问题是当我添加大括号时，这不是由smarty引擎呈现并抛出错误。

例如：

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

上面的代码片段将在smarty中创建细分。

Answer 1

我建议您在JavaScript中编写事件处理程序。如果您要将所有事件处理程序编写为属性，那么您将遇到很多问题，例如代码验证，......

您可以编写一个实际循环所有复选框的循环，将值设置为与更改值相反的值（因此，如果一个复选框变为true，则其他复选框必须变为false）。< / p>

要做到这一点，你可以写一个这样的简单函数：

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

dojo/query模块允许您获取与给定选择器匹配的所有节点的列表。使用dijit/registry模块，您可以检索DOM节点后面的实际小部件，然后使用以下方法设置值：

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

第三个参数（设置为false）实际上非常重要。此参数将阻止进一步的事件调用。如果你没有把那个参数放在那里，它实际上会触发另一个onChange，导致无限循环。

现在，您唯一需要做的就是将onChange事件处理程序绑定到调用此函数的每个复选框，您也可以使用dojo/query和dijit/registry模块将其绑定到例如：

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

可以在JSFiddle上找到完整的示例。

但我还是建议使用radiobutton。我认为你实际上可以说这是一个糟糕的UI设计，一个复选框和一个单选按钮有不同的目标，使用它们的意思。

选中Smarty / Dojo复选框取消选中其他复选框

1 个答案: