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.

Answer 1

You can use:

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

Answer 2

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

Answer 3

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