您好我想要一个文本框启用或禁用复选框状态的依赖
我有这个代码,但没有任何反应我试过使用其他人找到方法。
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>
提前感谢您的时间和答案
答案 0 :(得分:2)
仔细查看生成的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
本身完全相同的值。为了更好地完成所有操作,请将脚本放在真实的.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类,这样可以更好地重用。