Disabling input fields in a form using jQuery

Question

I have recently upgraded to Liferay 6.0, JSF 2.1 and jQuery 1.7.

Here is my html form:

 <h:form id="fundRequestForm" action="" method="post">
      <!-- Inside this I have various form field -->
    </h:form>

The form generated in the html page source:

<form id="_jpfcpncuivr_A2262_j_id1:fundRequestForm" name="_jpfcpncuivr_A2262_j_id1:fundRequestForm"
method="post" action="">
</form>

I want to disable all the input fields in a form other than the hidden form fields.

here is my javascript for that

jQuery(document).ready(function()
{
  jQuery('form#_jpfcpncuivr_A2262_j_id1:fundRequestForm input[type!="hidden"]').attr('disabled', 'true');
});

The input fields are not getting disabled. Please let me know what is wrong in this code.

Community · Accepted Answer · 2017-05-23 12:04:43Z

3

While valid in HTML element IDs/names, the colon is a special character in CSS selectors as it represents the start of pseudo selector. You need to escape it in CSS selectors.

jQuery('form#_jpfcpncuivr_A2262_j_id1\\:fundRequestForm input[type!="hidden"]').attr('disabled', 'true');

2 Comments

Sri Over a year ago

And also do you recommend me using prop over attr?

BalusC Over a year ago

In your particular case both works as good. The major difference is in retrieving values only. The general recommended way is however to prefer prop() over attr(). But again, this won't make any difference in your particular case. For more detail, see jQuery.prop() documentation.

Naftali · Accepted Answer · 2012-07-06 17:36:26Z

-1

Try adding a class to it:

<h:form id="fundRequestForm" action="" method="post" class="someClass">
  <!-- Inside this I have various form field -->
</h:form>

JS:

jQuery(document).ready(function()
{
  jQuery('.someClass input').prop('disabled', true); //<-- use prop NOT attr
});

edited Jul 6, 2012 at 17:36

answered Jul 6, 2012 at 17:06

Naftali

147k41 gold badges247 silver badges304 bronze badges

3 Comments

Sri Over a year ago

But this form element ID is auto generated especially "_jpfcpncuivr_A2262_j_id1:". This gets appended to the form ID given above "fundRequestForm"

Sri Over a year ago

And also could you please tell me the difference between using prop and attr?

Naftali Over a year ago

@Sri See here for the BIG differences between prop and attr

Collectives™ on Stack Overflow

Disabling input fields in a form using jQuery

2 Answers 2

See also:

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

See also:

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related