Disabling html Controls within same css class

Question

We have a asp.net mvc application where we have to disable mvc html controls within a css class which works fine in IE browser but it does not work in Chrome and Firefox.

This is the code we use at the moment:

$(".q-answer").attr("disabled", "disabled");

We have tried to disable with prop and also different options but it didn't work.

Please see below code from developer tools:

IE browser :

<p **disabled="disabled"** class="q-answer">
    <select name="QuestionnaireResponses.IsAvailableForReview" id="ddlIsAvailableForReview" onchange="IsAvailableForReview()">
        <option value="">Select</option> 
        <option selected="selected" value="Y">Yes</option> 
        <option value="N">No</option> 
    </select>
</p>

Chrome Browser :

<p class="q-answer">
    <%: Html.DropDownListFor(m => m.QuestionnaireResponses.IsAvailableForReview, new SelectList(yesNoOptions, "Value", "Text"), "Select", new { @id = "ddlIsAvailableForReview", onChange = "IsAvailableForReview()" })%>
</p>

If you see both elements from browsers, IE works fine as it adds disabled property but for Chrome it doesn't add.

Any help is appreciated.

This is probably the best answer on this topic: http://stackoverflow.com/a/1414366/5118056 — hjardine, Oct 13 '15 at 07:59
we can disable with .prop or .attr methods. i think problem in your html. Take a look in view source — Arun Raj, Oct 13 '15 at 08:02
@StephenMuecke we did try with prop('disabled', true), but did not work. — Vamshi Chilukuri, Oct 13 '15 at 08:11
please see html element for Chrome :
<%: Html.DropDownListFor(m => m.QuestionnaireResponses.IsAvailableForReview, new SelectList(yesNoOptions, "Value", "Text"), "Select", new { @id = "ddlIsAvailableForReview", onChange = "IsAvailableForReview()" })%>
IE : — Vamshi Chilukuri, Oct 13 '15 at 08:13
@VamshiChilukuri, Your edit shows your attempting to disable a `
` element. Its the ` — , Oct 13 '15 at 08:44
@StephenMuecke, if its one element i can do that way, but i had to disable all the controls which have same css class name, I understand that disabled is not a valid attribute for a
element but how this is working for IE . — Vamshi Chilukuri, Oct 13 '15 at 09:39
for example , this is how element is designed as below :

<%:questionnaireLbls["IsLoanPaidOff"]%>

<%: Html.DropDownListFor(m => m.QuestionnaireResponses.IsLoanPaidOff, new SelectList(yesNoOptions, "Value", "Text"), "Select", new { @id = "ddlIsLoanPaidOff", onChange = "IsLoanPaidOff()" })%>

even i changed to have everything in div instead of
tag, but still issue exists in Chrome and Firefox. — Vamshi Chilukuri, Oct 13 '15 at 09:40
Are you surprised that something that is invalid works in IE :) Stop putting your code in comments. Its impossible to read especially when you don't even format it! You can easily change your selector to pick all inputs or selects that are child elements of your `
` element - in this case `$('q-answer select').prop('disabled', true);` — , Oct 13 '15 at 09:45
@StephenMuecke sorry about the formatting, yes am surpraised that it works in IE and not in Chrome and Firefox. — Vamshi Chilukuri, Oct 13 '15 at 10:12
@StephenMuecke thanks a lot, below works fine : $('q-answer select').prop('disabled', true); — Vamshi Chilukuri, Oct 13 '15 at 10:43
@VamshiChilukuri, See also [How do I format my posts using Markdown or HTML?](http://stackoverflow.com/help/formatting) — , Oct 13 '15 at 10:47

score 0 · Answer 1 · answered Oct 13 '15 at 08:13

0

Use prop() for jquery versions 1.6+

$(".q-answer").prop("disabled", true)

or you can use the following in any case this.disabled = true

$(".q-answer").each(function(){
    this.disabled = true;
})

answered Oct 13 '15 at 08:13

rrk

15,677
4
29
45

Disabling html Controls within same css class

1 Answers1