1

这是我的困境：我有一个带有 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;}

预先感谢您的帮助。

科里

4

2 回答 2

2

谢谢大家，提供信息。我研究了一些你们都建议的东西，看起来我能够让它发挥作用。令人沮丧的是答案非常简单，而我能够到达那里的方式是使用 CBroe 的方法。我只需要将它添加到我的 CSS 文件中：

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

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

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

感谢您的所有帮助！

于 2018-01-26T15:16:22.813 回答
0

不要制造领域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 选择器更具体，这样你的选择器就会优先。

于 2018-01-26T14:31:40.750 回答