CODEWITHSUNDEEP
javascriptjqueryhtmlcssreadonly-attribute
Cory
Cory

Reputation: 29

When using HTML and CSS, how can I apply a class to a field that is already read-only?

Here's my dilemma: I have jQuery code with an if-statement that applies a specific class to an element based on the value selected on a page where the user is filling out a form. I also built another form where a user can view the details of a form that has already been filled out. When the details page is displayed, most of the class is applied, but the grey "read-only" background overwrites the background color from the original class. I don't really want to go into the bootstrap files and adjust the read-only background color code if I can avoid it. How can I apply the full class (including the background color) to an element that is read-only?

Snippet of code from the "Create" page:

<div class="col-md-12">
                <div class="col-md-10">
                    @Html.LabelFor(model => model.Question1, htmlAttributes: new { @class = "control-label" })
                </div>
                <div class="col-md-2">
                    @Html.DropDownListFor(model => model.Question1, new[] { new SelectListItem() { Text = "Pass", Value = "Pass" }, new SelectListItem() { Text = "Fail", Value = "Fail" }, new SelectListItem() { Text = "NA", Value = "NA" } }, "Select an option", htmlAttributes: new { @class = "form-control text-box centerline", @onchange = "updateEscalationsListeningScore()", id = "question1Answer" })
                    @Html.ValidationMessageFor(model => model.Question1, "", new { @class = "text-danger" })
                </div>
            </div>

jQuery from the "Create" page:

if (Q1Answer === "Pass") {
        $('#question1Answer').addClass("correctListeningAnswer").removeClass("incorrectListeningAnswer").removeClass("naListeningAnswer");
        Q1Score = 3;
        Q1PotentialPoints = 3;
    }
    else if (Q1Answer === "Fail") {
        $('#question1Answer').addClass("incorrectListeningAnswer").removeClass("correctListeningAnswer").removeClass("naListeningAnswer");
        Q1Score = 0;
        Q1PotentialPoints = 3;
    }
    else if (Q1Answer === "NA") {
        $('#question1Answer').addClass("naListeningAnswer").removeClass("incorrectListeningAnswer").removeClass("correctListeningAnswer");
        Q1Score = 0;
        Q1PotentialPoints = 0;
    }
    else {
        $('#question1Answer').removeClass("correctListeningAnswer").removeClass("incorrectListeningAnswer").removeClass("naListeningAnswer");
        Q1Score = 3;
        Q1PotentialPoints = 3;
    }

Snippet of code from the "Details" page:

<div class="col-md-12">
                <div class="col-md-10">
                    @Html.LabelFor(model => model.Question1, htmlAttributes: new { @class = "control-label" })
                </div>
                <div class="col-md-2">
                    @Html.EditorFor(model => model.Question1, new { htmlAttributes = new { @class = "form-control text-box centerline", id = "question1Answer", @readonly = "readonly" } })
                    @Html.ValidationMessageFor(model => model.Question1, "", new { @class = "text-danger" })
                </div>
            </div>

jQuery from the "Details" page:

        if (Q1Answer === "Pass") {
        $('#question1Answer').addClass("correctListeningAnswer").removeClass("incorrectListeningAnswer").removeClass("naListeningAnswer");
        Q1Score = 3;
        Q1PotentialPoints = 3;
    }
    else if (Q1Answer === "Fail") {
        $('#question1Answer').addClass("incorrectListeningAnswer").removeClass("correctListeningAnswer").removeClass("naListeningAnswer");
        Q1Score = 0;
        Q1PotentialPoints = 3;
    }
    else if (Q1Answer === "NA") {
        $('#question1Answer').addClass("naListeningAnswer").removeClass("incorrectListeningAnswer").removeClass("correctListeningAnswer");
        Q1Score = 0;
        Q1PotentialPoints = 0;
    }
    else {
        $('#question1Answer').removeClass("correctListeningAnswer").removeClass("incorrectListeningAnswer").removeClass("naListeningAnswer");
        Q1Score = 3;
        Q1PotentialPoints = 3;
    }

CSS

.correctListeningAnswer {
background-color: #c6efce;
color: #006100;}

.incorrectListeningAnswer {
background-color: #ffc7ce;
color: #9c0006;}

.naListeningAnswer {
background-color: #ffeb9c;
color: #9c5700;}

Thank you in advance for your help.

Cory

Upvotes: 1

Views: 88

Answers (2)

Cory
Cory

Reputation: 29

Thank you, everyone, for the information. I researched a few things that you guys all suggested and it looks like I was able to get it to work. What's frustrating is that the answer was really simple, and the way I was able to get there was by using CBroe's method. I just had to add this to my CSS file:

.correctListeningAnswer[readonly] {
background-color: #c6efce;
color: #006100;
}

.incorrectListeningAnswer[readonly] {
background-color: #ffc7ce;
color: #9c0006;
}

.naListeningAnswer[readonly] {
background-color: #ffeb9c;
color: #9c5700;
}

I appreciate all of your help!

Upvotes: 2

Scott Marcus
Scott Marcus

Reputation: 65808

Don't make the field readonly, make it disabled. Then your background will work.

Here's an example:

input {
  background-color:#ffc;
}
<input type="text" disabled>

Or (and I personally think this is the better approach), don't use a form field to display information. Grab the data from the initial form and then display it in more semantically correct elements, like span, which aren't editable in the first place.

document.querySelector("button").addEventListener("click", function(){
  document.getElementById("dataOut").textContent = document.getElementById("dataIn").value;
});
<input id="dataIn">
<button type="button">Simulate a submit</button>
<span id="dataOut"></span>

As a last resort, you could always make your class selector more specific than the Bootstrap selectors, so that yours will take precedence.

Upvotes: 0

Related Questions