Change text color if checkbox is disabled

Question

How can I change the label color for this checkbox if the checkbox is disabled change the text color to red and if it's not change to green.

Here is my code:

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

In This case the checkbox is disabled and label color is red 'text-danger' I got the same ouput when is not disabled and supposed to be the label color is green 'text-success'

`if ($timelists[]='09:00:00')` <- this doesn't look right (at all). What are you trying to test for? — Jeto, Oct 27 '19 at 07:22
@Jeto I have a array of values with that. If the value '09:00:00' is in the array I want to make the label color red which is already disabled. — Elekpato, Oct 27 '19 at 07:58
@Elekpato This is invalid PHP however. You should use `in_array`. — Jeto, Oct 27 '19 at 08:01

Professor Abronsius · Answer 1 · 2019-10-27T08:47:29.850

0

As the label is immediately after the checkbox you can harness the simple rules available in standard CSS. In this instance the adjacent sibling selector can be used by defining the style with +

So:

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

as in

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 )"}

edited Oct 27 '19 at 08:47

answered Oct 27 '19 at 07:23

Professor Abronsius

33,063
5
32
46

OH. Thankyou! Save my day. One more thing how can I add some text into it for example if disabled add some text into label (ALREADY SCHEDULED) – Elekpato Oct 27 '19 at 08:07
again, use CSS to register the content using `:after` ~ see modified css above – Professor Abronsius Oct 27 '19 at 08:17
`label:after { content: "AVAILABLE"; color: green; } input[type="checkbox"]:disabled+label { color: red!important }` this show in all checkboxes even though it is disabled. – Elekpato Oct 27 '19 at 08:25
? what do you mean? – Professor Abronsius Oct 27 '19 at 08:32
I have multiple checkboxes. some are disabled. I want to add some text into the label depends if it is disabled or not. How to achieve that? I tried the :after. – Elekpato Oct 27 '19 at 08:38

Change text color if checkbox is disabled

1 Answers1