允许在重复控制中仅选中一个复选框

Question

主要任务是选中一个复选框并获取索引并将其设置在编辑框中并继续进行，我成功实现了编辑框中的选定索引，但我想让用户只选择一个日期

选中一个复选框后，我想取消选中其他选中的值，但是在我的代码中，我可以选中多个复选框，并且最近选中的值存储在编辑框中，我尝试了一些客户端 JavaScript但是失败了，即使在视图范围方法中存储检查的索引值也没有帮助我。重复控件中带有复选框的代码如下。

 <?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

    <xp:this.data>
        <xp:dominoDocument var="document1" formName="testing">
        </xp:dominoDocument>
    </xp:this.data>

    <xp:br></xp:br>
    <xp:repeat id="repeat1" rows="30" var="r" indexVar="i" first="0">
        <xp:this.value><![CDATA[#{javascript:var v:java.util.Vector = new java.util.Vector();
v.add('Date1');v.add('Date2');v.add('Date3');v.add('Date4');v.add('Date5');v.add('Date6');
return v;}]]></xp:this.value>
        <xp:br></xp:br>
        <xp:div id="checkDiv">



            <xp:checkBox id="checkBox1">

            <xp:eventHandler event="onchange" submit="true"
                refreshMode="partial" refreshId="checkDiv">
                <xp:this.action><![CDATA[#{javascript:if(getComponent("checkBox1").value == "true"){
//viewScope.put("IdValue",optionIndex2)
getComponent("finalDate").setValue(r);
//getComponent("checkBox1").getAttributes().put("true",optionIndex2);
}
else
getComponent("finalDate").setValue("");
}]]></xp:this.action>
            </xp:eventHandler></xp:checkBox>
            <xp:text escape="true" id="computedField1"
                value="#{javascript:r}">

            </xp:text>
        </xp:div>
        <xp:br></xp:br>
    </xp:repeat>
    <xp:inputText id="finalDate"></xp:inputText>
</xp:view>

我不知道，在客户端检查会是最佳选择，还是在服务器端检查会更好。需要了解如何只选中一个复选框。 任何形式的建议都会有所帮助

Answer 1

我建议你看看这个视频：

http://www.notesin9.com/2011/04/01/notesin9-025-selecting-documents-from-a-repeat-control/

这是关于重复选择多个文档。我想只选择一个，你需要做的就是用一个变量替换我的 ArrayList。因此，每个新选择都会覆盖最后一个选择，您一次只能选择一个文档。

请注意，我还使用按钮和 css 来突出显示行...如果您想这样做，从按钮转换为复选框也应该没什么大不了的。

Answer 2

如果您退后一步重新评估使用的控件和重复控件的选择，是否有更简单的方法？

除非没有包含更多代码，否则您希望让用户从字段名称列表中选择一个然后执行某些操作。我将使用单选按钮组或组合框代替重复控件和计算域，然后您无需重复控件或计算域即可处理该功能要求。两者都允许计算选项。

如果您需要一个重复控件，因为重复中不仅仅是名称列表，请再次选择一个专为确保单选而设计的组件 - 按钮或单选按钮。我相信您可以在单选按钮上设置组名，这将满足您的要求。

复选框专为多选而设计。单选按钮是用于单选的组件。似乎复选框不是您正在寻找的功能的最佳选择。

Answer 3

经过一番研究，似乎可以使用jquery，通过将唯一的styleClass传递给所有根据重复控制生成的复选框。

所以复选框中的第一个变化是 styleClass 计算为 "return ""+r;"也就是索引，

接下来我使用了客户端 JavaScript 来检查 uncheck on 事件。

CSJS：

 var textFieldValue = document.getElementById('#{id:finalDate}').value;
 if(textFieldValue != "")
 {
 $("."+textFieldValue).prop("checked", false);
 }

在服务器端 JavaScript 中，如果复选框被选中，则设置文本字段值条件为“true”。

SSJS：

if(getComponent("checkBox1").getValue() == "true"){
getComponent("finalDate").setValue(""+r);
}
else
getComponent("finalDate").setValue("");

并且复选框部分刷新到文本字段。

整体页面代码：

    <?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

    <xp:this.data>
        <xp:dominoDocument var="document1" formName="testing">
        </xp:dominoDocument>
    </xp:this.data>

    <xp:br></xp:br>
    <xp:repeat id="repeat1" rows="30" var="r" indexVar="i" first="0">
        <xp:this.value><![CDATA[#{javascript:var v:java.util.Vector = new java.util.Vector();
v.add('Date1');v.add('Date2');v.add('Date3');v.add('Date4');v.add('Date5');v.add('Date6');
return v;}]]></xp:this.value>
        <xp:br></xp:br>
        <xp:div id="checkDiv">



            <xp:checkBox id="checkBox1">

            <xp:this.styleClass><![CDATA[#{javascript:return ""+r;}]]></xp:this.styleClass>
            <xp:eventHandler event="onchange" submit="true"
                refreshMode="partial" refreshId="finalDate">
                <xp:this.action><![CDATA[#{javascript:if(getComponent("checkBox1").getValue() == "true"){
getComponent("finalDate").setValue(""+r);
}
else
getComponent("finalDate").setValue("");
}]]></xp:this.action>
                <xp:this.script><![CDATA[var v = document.getElementById('#{id:finalDate}').value;
if(v!="")
{
$("."+v).prop("checked", false);
}


]]></xp:this.script>
            </xp:eventHandler></xp:checkBox>
            <xp:text escape="true" id="computedField1"
                value="#{javascript:r}">

            </xp:text>
        </xp:div>
        <xp:br></xp:br>
    </xp:repeat>
    <xp:inputText id="finalDate"></xp:inputText>
</xp:view>

如果在重复控制中使用单选按钮，这也可能很有用。 复选框现在可以根据需要将值设置为文本字段。