Disabling the controls using jQuery in ASP.NET MVC3

Question

I have following table with some rows and want to disable the all the controls inside each row.

Below is my HTML code:

<table id="tblChildData">
    <tr id="trChild2">
        <td>
            2
        </td>
        <td style="height: 30px;">
            <%:Html.TextBoxFor(m=>m.childName2) %><%--<br />
                <%: Html.ValidationMessageFor(m=>m.SpouseName,null,new{@Class="field-validation-message"}) %>--%>
        </td>
        <td style="height: 30px; text-align: center;">
            &nbsp;M<%: Html.RadioButtonFor(m=>m.genderIdChild2,1) %>
            &nbsp;F<%:Html.RadioButtonFor(m=>m.genderIdChild2,2) %>
        </td>
        <td style="height: 30px; text-align: center;">
            <%:Html.TextBoxFor(m=>m.ageChild2,new{Style="width:30px;",maxlength=3}) %><%--<br />
                <%:Html.ValidationMessageFor(m=>m.SpouseAge,null,new{@Class="field-validation-message"}) %>--%>
        </td>
        <td style="height: 30px; text-align: center;">
            &nbsp;&nbsp;&nbsp;Married<%: Html.RadioButtonFor(m=>m.maritialStatusChild2,1) %>
            UnMarried<%:Html.RadioButtonFor(m=>m.maritialStatusChild2,2) %>
        </td>
    </tr>
</table>

below is the code for jQuery I have used to disabled the controls inside each table rows:

$("#trChild2").find("input,button,textarea").attr("disabled", true);
$("#trChild2").hide();
$("#trChild3").find("input,button,textarea").attr("disabled", true);
$("#trChild3").hide();
$("#trChild4").find("input,button,textarea").attr("disabled", true);
$("#trChild4").hide();
$("#trChild5").find("input,button,textarea").attr("disabled", true);
$("#trChild5").hide();
$("#trChild6").find("input,button,textarea").attr("disabled", true);
$("#trChild6").hide();
$("#trChild7").find("input,button,textarea").attr("disabled", true);
$("#trChild7").hide();
$("#trChild8").find("input,button,textarea").attr("disabled", true);
$("#trChild8").hide();
$("#trChild9").find("input,button,textarea").attr("disabled", true);
$("#trChild9").hide();
$("#trChild10").find("input,button,textarea").attr("disabled", true);
$("#trChild10").hide();
$("#trChild11").find("input,button,textarea").attr("disabled", true);
$("#trChild11").hide();
$("#trChild12").find("input,button,textarea").attr("disabled", true);
$("#trChild12").hide();

but I dont know why it is only hiding the table rows but not disabling the controls inside the rows...

I have tried this on jsfiddle also but there it seems to be working fine: http://jsfiddle.net/3QuT4/1/

Please help me..

Thanks,

Aman

Just a side note: if you want to disable everybody inside the table why don't you give the table an id and call $("#mytable").find("input, button").attr("disabled", true);? — Thomas C. G. de Vilhena
– Thomas C. G. de Vilhena, Commented Sep 22, 2012 at 14:12
actually i dont want to disable all the tr inside the table...thats why..i wanted to disable only those tr — aamankhaan
– aamankhaan, Commented Sep 22, 2012 at 14:13

Darin Dimitrov · Accepted Answer · 2012-09-22 14:42:18Z

2

You don't need to assign unique ids to each <tr> row of the table. You could use the following selector to disable all input fields inside the table:

$('table :input').prop('disabled', true);

Notice that using .prop() is the recommended function to use for disabling fields instead of .attr() if you are using jQuery 1.6 or later.

And if you want to disable only certain rows then apply those rows the same class and then:

$('table tr.someClassName :input').prop('disabled', true);

Using ids and repeating the same jQuery selector for each id seems like a very naïve approach to tackle the problem.

answered Sep 22, 2012 at 14:42

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

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

Collectives™ on Stack Overflow

Disabling the controls using jQuery in ASP.NET MVC3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related