0

I have a form in which I am disabling all the input fields that is not hidden on jQuery(document).ready(function())

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:c="http://java.sun.com/jsp/jstl/core" lang="en" xml:lang="en" style="padding-bottom: 8px;">
    <script>
        jQuery(document).ready(function()
        {
            jQuery('div#formBuilderPreviewEnrollmentData input[type!="hidden"]').prop('disabled', true);
        });
    </script>
    <h:form id="previewMarketingProgramForm">
        <div class="modal-content">
            <br /> <br /> <br />
            <div>
                <h4>Enrollment Form</h4>
            </div>
            <table cellpadding="0" cellspacing="0" border="1" width="100%" class="results-table">
                <tr>
                    <td>
                        <div id="formBuilderPreviewEnrollmentData">
                            <h:outputText value="#{previewMarketingProgramBean.enrollmentFormBean.enrollmentFormContent}" escape="false" />
                        </div>
                    </td>
                </tr>
            </table>
            <br /> <br /> <br />
        </div>
    </h:form>
</div>

Here is the Javascript error:

Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus.

Please tell me what could be causing this error. I am using jQuery-1.7.2-min.js

Here is the HTML generated source for this form for your reference:

<!DOCTYPE html> 
<html class="ltr" dir="ltr" lang="en-US"> <head> <title>View Article - Liferay</title> 
    <script src="http://xx:8001/vcc-theme/js/jquery-1.7.2.min.js"></script> 
    <script src="http://xx:8001/vcc-theme/js/javascript.js"></script> 
    <script src="http://xx:8001/vcc-theme/js/jquery.tablesorter.min.js"></script> 
    <script src="http://xx:8001/vcc-theme/js/jquery.tablesorter.pager.js"></script> 
    <script src="http://xx:8001/vcc-theme/js/jquery.autocomplete.js"></script> 
    <script src="http://xx:8001/vcc-theme/js/jquery.simplemodal.1.4.2.min.js"></script> 
    <script src="http://xx:8001/vcc-theme/js/jquery.scrollTo.js"></script> 
    <script src="http://xx:8001/vcc-theme/js/ui.datepicker.js"></script> 
    <script>
    /*<![CDATA[*/jQuery(document).ready(function()
    {
        jQuery('div#formBuilderPreviewEnrollmentData input[type!="hidden"]').prop("disabled",true)});
    /*]]>*/
     </script> 
     <form id="_jpfcpncuivr_A0169_j_id1:previewMarketingProgramForm" name="_jpfcpncuivr_A0169_j_id1:previewMarketingProgramForm" method="post" 
     action="http://xxx/yyy.do">
         <div class="modal-content"> 
            <br /> <br /> <br /> 
            <div> <h4>Enrollment Form</h4> </div> 
            <table cellpadding="0" cellspacing="0" border="1" width="100%" class="results-table"> 
                <tr> 
                    <td> 
                        <div id="formBuilderPreviewEnrollmentData">
                            <p> NAME: <input class="required" name="NAME" type="text" /></p> <p> &#160;</p> 
                            <p> AGE: <input name="AGE" type="text" /></p> <p> &#160;</p> 
                            <p> ADDRESS:<textarea name="ADDRESS"></textarea></p> 
                        </div> 
                    </td> 
                </tr> 
            </table> 
            <br /> <br /> <br />
         </div>
    </form>
</html>

I am getting this JS error in IE 7 (works fine in Firefox)

4

1 に答える 1

0

これを試してください

<script>
        jQuery(document).ready(function()
        {
            jQuery('div#formBuilderPreviewEnrollmentData input[type!="hidden"]').attr("disabled", true)
        });
</script>

念のため、type="hidden" ではない入力を無効にするか、画面に表示されない入力 (css スタイルの表示: なし) を無効にします。2つには大きな違いがあり、jqueryセレクターは異なります。

于 2012-09-24T19:59:23.903 に答える