如何使用文本区域、文本框和文件上传字段创建 h:selectOneRadio 选项？

Question

我正在尝试在 JSF 2.0 中制作以下表单，但遇到一些麻烦：

1. 我怎样才能制作s 里面有文本框和文本区域？

2. 未选择单选按钮时如何取消文本区域或文本框？

---

更新：事实上，我对那个表格还一无所知。我只有基本的数据表，我正在尝试：

<h:column>
  <h:selectOneRadio id="radio" layout="pageDirection" onclick="uncheckOthers(this)" > 
    <f:selectItem id="radio_1" itemLabel="Accesion Number: ">
      <h:inputTextarea id="radio" />
      <!-- Or another one objet distinct to <f:selectItem> -->
    </f:selectItem>
  </h:selectOneRadio>
</h:column>   

我在这个网络中找到了 uncheckOthers() 函数以及我认为它具有相同功能的另一个函数：

function seleccionarSequencesType(x){
    document.getElementById("gi").disabled=true;
    for (var i = 0; i < document.solicitud.sequencesType.length; i++) {
        if (document.solicitud.sequencesType[i].checked) {
            inhabilitar(document.getElementById(document.solicitud.sequencesType[i].value), false);
            //document.getElementById(x.value).disabled=false;
        } else {
            inhabilitar(document.getElementById(document.solicitud.sequencesType[i].value), true);
            //document.getElementById(document.solicitud.sequencesType[i].value).disabled=true;
        }
    }
}

function uncheckOthers(radio) {
    var name = radio.name.substring(radio.name.lastIndexOf(':'));
    var elements = radio.form.elements;
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].name.substring(elements[i].name.lastIndexOf(':')) == name) {
            elements[i].checked = false;
        }
    }
    radio.checked = true;
}        

我有一个带有 < code>String 属性来保存textareas的信息，但是还没有完全开发出来，因为一开始我想实现上面的需求。

Answer 1

标准 JSF < h:selectOneRadio> 组件不支持此功能。最好的选择是使用 Tomahawk 与layout 属性设置为 spread。这使您能够将各个单选按钮定位为 任何你想要的地方。

要根据单选按钮选项值禁用文本字段，只需在未选择所需的单选按钮选项值时让其 disabled 属性评估 true 即可。

这是一个基本的启动示例：

<style>li { list-style-type: none; }</style>
...
<h:form enctype="multipart/form-data">
    <t:selectOneRadio id="options" value="#{bean.option}" layout="spread">
        <f:selectItem itemValue="text" itemLabel="Text in FASTA format" />
        <f:selectItem itemValue="number" itemLabel="Asseccion number" />
        <f:selectItem itemValue="file" itemLabel="Upload files" />
        <f:ajax render="@form" />
    </t:selectOneRadio>
    <ul>
        <li>
            <t:panelGrid columns="2">
                <t:panelGroup colspan="2">
                    <t:radio for="options" index="0" />
                </t:panelGroup>
                <h:outputLabel for="text1" value="1st sequence" />                
                <h:inputTextarea id="text1" value="#{bean.text1}" disabled="#{bean.option != 'text'}" />
                <h:outputLabel for="text2" value="2nd sequence" />                
                <h:inputTextarea id="text2" value="#{bean.text2}" disabled="#{bean.option != 'text'}" />
            </t:panelGrid>
        </li>
        <li>
            <t:panelGrid columns="2">
                <t:panelGroup colspan="2">
                    <t:radio for="options" index="1" />
                </t:panelGroup>
                <h:outputLabel for="number1" value="1st id" />                
                <h:inputText id="number1" value="#{bean.number1}" disabled="#{bean.option != 'number'}" />
                <h:outputLabel for="number2" value="2nd id" />                
                <h:inputText id="number2" value="#{bean.number2}" disabled="#{bean.option != 'number'}" />
            </t:panelGrid>
        </li>
        <li>
            <t:panelGrid columns="2">
                <t:panelGroup colspan="2">
                    <t:radio for="options" index="2" />
                </t:panelGroup>
                <h:outputLabel for="file1" value="1st sequence" />                
                <t:inputFileUpload id="file1" value="#{bean.file1}" disabled="#{bean.option != 'file'}" />
                <h:outputLabel for="file2" value="2nd sequence" />                
                <t:inputFileUpload id="file2" value="#{bean.file2}" disabled="#{bean.option != 'file'}" />
            </t:panelGrid>
        </li>
    </ul>
    <h:commandButton value="Submit" action="#{bean.submit}" />
</h:form>

请注意，Tomahawk 还提供了 在标准 colspan 支持href="http://docs.oracle.com/javaee/6/javaserverfaces/2.1/docs/vdldocs/facelets/h/panelGroup.html" rel="nofollow noreferrer">< /code> 以及 浏览并选择文件。后者要求将表单的编码类型设置为multipart/form-data。这反过来又需要在 web.xml 中注册 ExtensionsFilter，如本迷你教程所示：JSF 2.0 文件上传。

Answer 2

1. 单选按钮就是单选按钮，句号。文本框应该是单独的元素（最好的解决方案是创建包含单选按钮和文本框/文件上传字段的自定义组件）

2. 使用 javascript。与 JSF 结合起来会变得很难看，但如果将其保存在外部文件中，应该没问题。