[英]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. 这是我的两难境地:我有一个带if语句的jQuery代码,该语句根据在用户填写表单的页面上选择的值将特定类应用于元素。 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: 来自“创建”页面的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;
}
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: 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 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 科里
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.
令人沮丧的是答案真的很简单,而我到达那里的方法是使用CBroe的方法。 I just had to add this to my CSS file:
我只需要将此添加到我的CSS文件中:
.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! 感谢您的帮助!
Don't make the field readonly
, make it disabled
. 不要将字段
readonly
, 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. 从初始形式中获取数据,然后将其显示在语义上更正确的元素中,例如
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>
As a last resort, you could always make your class selector more specific than the Bootstrap selectors, so that yours will take precedence. 作为最后的选择,您总是可以使类选择器比Bootstrap选择器更具体,以便您的选择器具有优先权。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.