Question

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

我有这个代码，但没有任何反应我试过使用其他人找到方法。

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>

提前感谢您的时间和答案

Answer 1

仔细查看生成的HTML输出。

此，

<p:selectBooleanCheckbox id="singleDoc" />

生成以下HTML（为了能够应用jQuery UI外观＆＃39; n＆＃39;感觉复选框）：

<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">，你在互联网上随机找到了一些专门针对<input type="checkbox">的例子（以及一个以浏览器为中心的例子;挂钩{{ 1}}复选框上的事件即不是MSIE友好的）。

你需要监听HTML元素的change事件以及其他click类（因此那个也有ui-state-default类的事件）。然后，您应该调查同一ui-chkbox-box容器中实际 <input type="checkbox">的已检查状态，该容器隐藏在花哨的外观后面。＆nbsp;＆＃39; n＆＃39;感觉。

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

ui-chkbox

请注意，我也做了4项改进：

使用<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>代替笨拙的<h:outputScript target="body">。
使用<script>$(window).load()代替$(document).on(event, selector, function)，否则一旦您ajax更新$(selector).on(event, function)后面的元素，这一切都会中断。
直接使用selector，而不是在isChecked块中进行比较，if-else块设置与isChecked本身完全相同的值。
无需通过DOM遍历来获取已具有唯一ID的元素。直接抓住吧。整个HTML DOM树中只能有1个。

为了更好地完成所有操作，请将脚本放在真实的.js文件中，您可以通过<h:outputScript name>添加该文件。 JS代码属于.js个文件，而不属于.xhtml个文件。要使更好，请使用智能CSS类名而不是ID。 E.g。

<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类，这样可以更好地重用。

如何在jQuery中获取<p：selectbooleancheckbox>的检查状态</p：selectbooleancheckbox>

1 个答案: