Question

如果禁用此复选框，如何更改此标签的标签颜色，请将文本颜色更改为红色，如果未更改为绿色，则为

。

这是我的代码：

<?php
if ($timelists[]='09:00:00'){
?>
<div class="checkbox checkbox-success checkbox-info text-danger">
<input id="checkbox-15" type="checkbox" name="timelist[]"value="09:00:00" <?php echo (in_array("09:00:00", $timelists)?"disabled='disabled'":"") ?>>
<label for="checkbox-15">
09:00 AM - 10:00 AM (ALREADY SCHEDULED)
</label>
</div>
<?php
}
else{
?>
<div class="checkbox checkbox-success checkbox-info text-success">
<input id="checkbox-15" type="checkbox" name="timelist[]"value="09:00:00" <?php echo (in_array("09:00:00", $timelists)?"disabled='disabled'":"") ?>>
<label for="checkbox-15">
09:00 AM - 10:00 AM (AVAILABLE)
</label>
</div>
<?php
}
?>

在这种情况下，复选框处于禁用状态，标签颜色为红色“文本危险”，但未禁用时我得到了相同的输出，应该是标签颜色为绿色“文本成功”

Answer 1

由于标签紧邻复选框，因此您可以利用标准CSS中可用的简单规则。在这种情况下，可以通过使用adjacent sibling selector

定义样式来使用+

所以：

:disabled + label{ /* styles for label... */ }

如

label { color: green; } /* how the labels will look normally */

input[type="checkbox"]:disabled+label {
  color: red!important
} /* labels for checkboxes that are disabled */

input[type="checkbox"]:disabled + label:after{ content:"( ALREADY SCHEDULED )" }

<div class="checkbox checkbox-success checkbox-info text-danger">
	<input id="checkbox-15" type="checkbox" name="timelist[]" value="09:00:00" disabled />
	<label for="checkbox-15">09:00 AM - 10:00 AM</label>
</div>

<div class="checkbox checkbox-success checkbox-info text-danger">
	<input id="checkbox-16" type="checkbox" name="timelist[]" value="10:00:00" />
	<label for="checkbox-16">10:00 AM - 11:00 AM</label>
</div>

label{color:green;}
label:after{content:"( AVAILABLE )"}
input[type="checkbox"]:disabled + label{color:red!important}
input[type="checkbox"]:disabled + label:after{content:"( ALREADY SCHEDULED )"}

如果复选框被禁用，则更改文本颜色

1 个答案: