允许在重复控件中只选中一个复选框

Question

主要任务是select一个check box获取index并在edit box中设置然后继续，我成功实现了selected index in edit box,但我想让用户 select 只有一个日期

在 select 选中一个复选框后，我想取消选中其他选中的值，但是在我的代码中我可以 select 多个复选框并且最近选中的值存储在编辑框，我试过一些客户端 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>

我不知道，最好在客户端检查它，或者在服务器端检查它是 better.Need 如何仅选中一个复选框的想法。任何类型的建议都会有所帮助

Answer 1

我推荐你看看这个视频：

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

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

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

Answer 2

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

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

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

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

Answer 3

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

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

接下来我使用客户端 JavaScript 来检查取消选中 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>

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

允许在重复控件中只选中一个复选框

Allow check only one check box in repeat control

checkbox

repeat

xpages

xpages-ssjs