2

嗨，我想要一个文本框启用或禁用复选框状态的依赖

我有这段代码，但没有任何反应，我尝试过使用其他查找方法。

document.getElementById('j_idt6:docName')

和

('j_idt6:docName')

但不起作用。

这是我的全部代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title></title>

</h:head>
<h:body>
<script type="text/javascript"
    src="http://code.jquery.com/jquery-git.js"></script>


<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$('#j_idt6\\:singleDoc').change( function() {
var isChecked = this.checked;

if(isChecked) {
    $(this).parents("tr:eq(0)").find('#j_idt6\\:docName').prop("disabled",true); 
} else {  
    $(this).parents("tr:eq(0)").find('#j_idt6\\:docName').prop("disabled",false);
}

});
});//]]>  

</script>


<h:form>

    <p:panel id="panel" header="Test">

        <h:panelGrid columns="1" cellpadding="5">

            <p:outputLabel for="singleDoc" id="msgSingleDoc"
                value="Is a single document." />
            <p:selectBooleanCheckbox id="singleDoc" />

            <p:outputLabel for="docName" value="Name of the document" />
            <p:inputText id="docName" required="false" />


        </h:panelGrid>
    </p:panel>
</h:form>

</h:body>
</html>

我在这里找到了另一种查找元素的方法http://www.mkyong.com/jsf2/primefaces/how-to-get-jsf-id-via-jquery/

我正在使用 Primefaces 5

但仍然没有任何反应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>ORC Sysmar</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-git.js"></script>
</h:head>
<h:body>

<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$(PrimeFaces.escapeClientId('formulario:singleDoc')).change( function() {
var isChecked = this.checked;

if(isChecked) {
            $(this).parents("tr:eq(0)").find(PrimeFaces.escapeClientId('formulario:docName')).prop("disabled",true); 
 } else {  
            $(this).parents("tr:eq(0)").find(PrimeFaces.escapeClientId('formulario:docName')).prop("disabled",false);
 }

 });
});//]]>  

</script>




<h:form id="formulario">

<p:panel id="panel" header="Test">

    <h:panelGrid columns="1" cellpadding="5">
        <p:outputLabel for="singleDoc" id="msgSingleDoc"
            value="Is a single document." />
        <p:selectBooleanCheckbox id="singleDoc" />

        <p:outputLabel for="docName" value="Name of the document" />
        <p:inputText id="docName" required="false" />


    </h:panelGrid>
</p:panel>
</h:form>

</h:body>
</html>

提前感谢您的时间和答案

4

1 回答 1

2

仔细查看生成的 HTML 输出。

这个，

<p:selectBooleanCheckbox id="singleDoc" />

生成以下 HTML（以便能够在复选框上应用 jQuery UI 外观）：

<div id="formulario:singleDoc" class="ui-chkbox ui-widget">
    <div class="ui-helper-hidden-accessible">
        <input id="formulario:singleDoc_input" name="formulario:singleDoc_input" type="checkbox" />
    </div>
    <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
        <span class="ui-chkbox-icon ui-c"></span>
    </div>
</div>

您正试图change在<div class="ui-chkbox">. 这确实行不通。它不是<input type="checkbox">您在 Internet 上随机找到的某些专门针对的示例中的脚本所期望的<input type="checkbox">（还有一个非常以浏览器为中心的示例；复选框上的挂钩change事件即不是 MSIE 友好的）。

您需要侦听click具有除其他ui-state-default类之外的 HTML 元素的事件（因此也具有ui-chkbox-box类）。然后，您应该调查隐藏在花哨外观背后的同一容器内实际的检查状态。 <input type="checkbox">ui-chkbox

所以，总而言之，这应该做：

<h:outputScript target="body">
    $(document).on("click", "#formulario\\:singleDoc .ui-chkbox-box", function() {
        var isChecked = $(this).closest(".ui-chkbox").find(":checkbox").get(0).checked;
        $("#formulario\\:docName").attr("disabled", isChecked); 
    });
</h:outputScript>

请注意，我还进行了 4 项改进：

  1. 使用<h:outputScript target="body">而不是笨拙的<script>$(window).load().
  2. 使用$(document).on(event, selector, function)代替$(selector).on(event, function)，否则一旦您对selector.
  3. 直接使用而不是在设置与自身完全相同的值isChecked的块中进行比较。if-elseisChecked
  4. 无需通过 DOM 遍历抓取已经具有唯一 ID 的元素。直接抢就行了。整个 HTML DOM 树中只能有 1 个。

为了让它变得更好，把脚本放在一个真实的.js文件中，你通过<h:outputScript name>. JS 代码属于.js文件，而不是.xhtml文件。为了让它变得更好，请使用智能 CSS 类名而不是 ID 。例如

<p:selectBooleanCheckbox ... styleClass="fieldtoggler" />

<p:inputText ... styleClass="togglablefield" />
<p:inputText ... styleClass="togglablefield" />
<p:inputText ... styleClass="togglablefield" />

和

$(document).on("click", "form .fieldtoggler .ui-chkbox-box", function() {
    var checked = $(this).closest(".ui-chkbox").find(":checkbox").get(0).checked;
    $(this).closest("form").find(".togglablefield").attr("disabled", checked);
});

这样，只需指定适当的 CSS 类，它就可以更好地重用。

于 2014-08-25T18:14:43.890 回答