jQuery change all attributes within a form to something else

Question

I have a form with form elements such as follows:

@using (Html.BeginForm("Edit", "UserProfile", FormMethod.Post, new { id = "EditUserForm", @class = "form-horizontal form-bordered" }))
{

    <div class="form-group">
        @Html.LabelFor(m => m.Email, new { @class = "col-sm-4 control-label" })
        <div class="col-sm-8">
            @Html.TextBoxFor(m => m.Email, new { @class = "form-control", type = "text", @readonly = "readonly" })
        </div>
    </div><!-- form-group -->

    <div class="form-group">
        @Html.LabelFor(m => m.Name, new { @class = "col-sm-4 control-label" })
        <div class="col-sm-6">
            @Html.TextBoxFor(m => m.Name, new { @class = "form-control", type = "text", @readonly = "readonly" })
        </div>
    </div><!-- form-group -->

}

I want to use jquery to loop through all the elements within the form and to change / remove the readonly Attribute. When I click a button / element.

how would I go about doing this. I only know how to change the attribute of a single item which Id I know?

html is For Razor view.

It is much better to provided rendered HTML, if question is only about client side. — Regent
– Regent, Commented Sep 30, 2014 at 12:02

A. Wolff · Accepted Answer · 2014-09-30 11:59:26Z

2

You can use:

$(function () {
    $('#EditUserForm [readonly]').prop('readonly', false);
});

answered Sep 30, 2014 at 11:59

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

collab-with-tushar-raj · Accepted Answer · 2014-09-30 12:10:58Z

1

FIDDLE

    $(".form-group input[type=text").each(function(){
        var attr=$(this).attr('readonly');
        if(typeof attr !==typeof undefined || attr!==false)
           $(this).removeAttr('readonly');
    });

edited Sep 30, 2014 at 12:10

answered Sep 30, 2014 at 12:02

collab-with-tushar-raj

1,31211 silver badges22 bronze badges

4 Comments

Regent Over a year ago

typeof attr !==typeof undefined can be simplified into attr !== undefined.

Regent Over a year ago

No, it is just unnecessary symbols. !== compares looking at operands type, while != looks only on values, converting them to one type.

collab-with-tushar-raj Over a year ago

yes , since you know this , hope you understand why this is more accurate .And you can't say this is unnecessary symbols as this will help you know the values type also .

Regent Over a year ago

attr !== undefined works as typeof attr != typeof undefined || attr != undefined. So, once more, as there is internal checking for type inside !==, there is no need to check types, just attr !== undefined for accurate way for checking for undefined value. Take a look at fiddle for example and a little explanation.

Kartikeya Khosla · Accepted Answer · 2014-09-30 12:19:04Z

1

Since there is only input fields in your form.

Try Something like this:

$('input[readonly]').removeAttr('readonly');

OR

$('#EditUserForm input[readonly]').removeAttr('readonly');

Working Demo

edited Sep 30, 2014 at 12:19

answered Sep 30, 2014 at 11:58

Kartikeya Khosla

18.9k8 gold badges46 silver badges70 bronze badges

2 Comments

Regent Over a year ago

Yes, it looks good for me now. It's very hard to understand OP's HTML, but I think it's what is required, +1.

Kartikeya Khosla Over a year ago

@Regent..yes the OP is using Asp.Net MVC server side technology..all..@Html.TextBoxfor() will generate simple textboxes...

Collectives™ on Stack Overflow

jQuery change all attributes within a form to something else

3 Answers 3

Comments

4 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

2 Comments

Related