Question

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

screenshot

如何在内部使用文本框和textareas制作<h:selectOneRadio>？
如果未选择广播按钮，我如何取消textareas或文本框？

更新：事实上，我还没有关于该表单的内容。我只有基本数据表，我正在尝试：

<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;
}

我有一个具有String属性的基本bean来保存textareas的信息，但它尚未完全开发，因为起初我想达到上述要求。

Answer 1

标准JSF <h:selectOneRadio>组件不支持此功能。使用Tomahawk's <t:selectOneRadio>并layout属性设置为spread的最佳选择。这使您可以将各个单选按钮定位为<t:radio>所需的任何位置。

要根据单选按钮选项值禁用文本字段，请在未选择所需的单选按钮选项值时，让其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还提供<t:panelGroup>，可在标准<h:panelGroup>和<t:inputFileUpload>之上添加colspan支持，以浏览和选择文件。后者要求将表单的编码类型设置为multipart/form-data。这反过来要求ExtensionsFilter在web.xml中注册，如此小型教程中所示：JSF 2.0 File upload。

Answer 2

单选按钮是一个单选按钮，句点。文本框应该是单独的元素（最好的解决方案是创建包含单选按钮和文本框/文件上载字段的自定义组件）
使用javascript。它与JSF结合起来很丑陋，但是如果你把它保存在外部文件中你应该没问题。

如何使用textarea，textbox和fileupload字段创建h：selectOneRadio选项？

2 个答案: