使用HTML和CSS時，如何將類應用於已經是只讀的字段？

Question

這是我的兩難境地：我有一個帶if語句的jQuery代碼，該語句根據在用戶填寫表單的頁面上選擇的值將特定類應用於元素。 我還構建了另一個表單，用戶可以在其中查看已經填寫的表單的詳細信息。 顯示詳細信息頁面時，將應用大多數類，但是灰色的“只讀”背景將覆蓋原始類的背景顏色。 如果可以避免的話，我真的不想進入引導文件並調整只讀的背景色代碼。 如何將完整類（包括背景色）應用於只讀元素？

來自“創建”頁面的代碼片段：

<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：

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;
    }

---

“詳細信息”頁面上的代碼段：

<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來自“詳細信息”頁面：

        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;}

預先感謝您的幫助。

科里

Answer 1

謝謝大家提供的信息。 我研究了大家都建議的一些東西，看來我能夠使它起作用。 令人沮喪的是答案真的很簡單，而我到達那里的方法是使用CBroe的方法。 我只需要將此添加到我的CSS文件中：

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

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

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

感謝您的幫助！

Answer 2

不要將字段readonly ， disabled它。 然后，您的背景將起作用。

這是一個例子：

 input { background-color:#ffc; } 

 <input type="text" disabled> 

或者（我個人認為這是更好的方法），不要使用表單字段來顯示信息。 從初始形式中獲取數據，然后將其顯示在語義上更正確的元素中，例如span ，這些元素首先不可編輯。

 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> 

作為最后的選擇，您總是可以使類選擇器比Bootstrap選擇器更具體，以便您的選擇器具有優先權。