how to disable form elements with jquery

Question

I have multiple form elements on a page and I have a next button for each form. I fill a form and click on next button to scroll to next form. I want that after filling up a form when user clicks next button it should disable all elements of previous elements.

What I tried:
I assigned unique id to all forms and tried following

$('form #firstFrm').find('input').attr('disabled','disabled');

But it did not do anyything.

$("#firstFrm> input").attr("disabled", true);

but not effect.

$("#firstFrm :input").attr("disabled", true);

for this instead of disabling elements under form with id firstFrm it disable elements of all form.

how to disable elements of particular form only.

HTML Code

<form action="" method="post">      
    <fieldset class="sectionwrap">
        <legend style="padding-right: 425px;">User Details</legend>
        <fieldset class="column" style= "width: 500px;margin-top: 10px;">
            <div id="firstFrm">
                <table style="padding-right: 20px; float: left"> 
                    <tr>
                        <td id="targetTD">
                            Username : <input id="email" type="email" name="email"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Password : <input id="password" name="password" type="password" class="text" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            password : <input id="confirmPassword" name="confirmPassword" type="password" class="text" />
                        </td>
                    </tr>
                </table>
            </div>
        </fieldset>

    </fieldset>
</form>

Solution

I created div under form and put all elements in that div and instead of disabling elements under form I disabled elements under div. This worked fine.

Try with `prop` as in `.prop('disabled', true)` – elclanrs Dec 13 '12 at 07:08 — elclanrs, Dec 13 '12 at 07:08
disabled all elements of all forms. – Sandeep Kumar Dec 13 '12 at 07:18 — Sandeep Kumar, Dec 13 '12 at 07:18
how does your HTML markup look like? – voigtan Dec 13 '12 at 07:30 — voigtan, Dec 13 '12 at 07:30
above is my html code that worked – Sandeep Kumar Dec 13 '12 at 07:42 — Sandeep Kumar, Dec 13 '12 at 07:42

score 0 · Answer 1 · answered Dec 13 '12 at 07:07

0

Try with this:

$( '#firstFrm input' ).attr ( 'disabled', true );

answered Dec 13 '12 at 07:07

Jan Hančič

53,269
16
95
99

it is also disabling elements of all form – Sandeep Kumar Dec 13 '12 at 07:11
1

You mean all elements on all forms get disabled? If that's the case, then you have some HTML markup issues. – Jan Hančič Dec 13 '12 at 07:12
I don't think so coz I checked opening and closing of all forms and all are opened and closes properly which I think should not let jquery to jump into another form and modify it. – Sandeep Kumar Dec 13 '12 at 07:16
Check your markup in a validator, or post it here so we can have a look. – Jan Hančič Dec 13 '12 at 07:41

score 0 · Answer 2 · edited Dec 13 '12 at 07:16

0

This would be a bit lenghty but you can try that as soon as the user goes to next input type you can disable the above elment using its id i.e.

{ $( '#input' ).attr ( 'disabled', true ); }

edited Dec 13 '12 at 07:16

Vishal Suthar

17,013
3
59
105

answered Dec 13 '12 at 07:12

Engineer

5,911
4
31
58

score 0 · Answer 3 · answered Dec 13 '12 at 07:22

$('form #firstFrm') will look for a form with id="firstForm" which is inside another <form> element

<form>
    <div>
        <form id="firstForm"></form>
    </div>
</form>

$("#firstFrm > input") will get only the direct <input/> children of a form

<form>
    <input />     // this is matched
    <div>
        <input/>  // this is not matched
    </div>
</form>

To get all the inputs try this:

$("input", $("#formId")).attr("disabled", true)

or

$("#formId input").attr("disabled", true)

how to disable form elements with jquery

Solution

3 Answers3