Question 42316 in PHP Question posted in
Official manual can be found here.

Using JavaScript to Alter Checkbox CSS Based on Element ID – PHP

The CSS I need to alter
I am looking for how to express the .g > input + span and
how to apply the set the style property only to the checkbox elements that have an ID that starts with "S".

.g > input + span::before {font-weight:400;content: ‘G’;color:#000;display: block;text-align: center;position: absolute;left: 0.36rem;top: 0.12rem;}
.g4 > input + span::before {font-weight:400;content: ‘G4’;color:#000;display: block;text-align: center;position: absolute;left: 0.19rem;top: 0.12rem;}

I would like a solution that does not use CSS variables.
This is not just a JS and CSS question.
This is NOT a question about pseudo elements

This page is not static.
There are over 2,000 checkboxes in this app.
The subset of checkboxes that is displayed at any given point in time is very dynamic.

The HTML

<div class="row">
<div class="dchk"><label class="e chk"> <input type="checkbox" id="C0081" class="chk" name="aC0081" value="1" /><span></span></label></div>
<div class="dchk"><label class="g4 chk"><input type="checkbox" id="C0083" class="chk" name="aC0083" value="3" /><span></span></label></div>
<div class="dchk"><label class="g chk"> <input type="checkbox" id="C0082" class="chk" name="aC0082" value="2" /><span></span></label></div>
<div class="inline">&nbsp;Pyrethrum</div></div>
<div class="row">
<div class="dchk"><label class="e chk"> <input type="checkbox" id="S0171" class="chk" name="aS0171" value="1" /><span></span></label></div>
<div class="dchk"><label class="g4 chk"><input type="checkbox" id="S0173" class="chk" name="aS0173" value="3" /><span></span></label></div>
<div class="dchk"><label class="g chk"> <input type="checkbox" id="S0172" class="chk" name="aS0172" value="2" /><span></span></label></div>
<div class="inline">&nbsp;Quinoline Yellow (#10)</div></div>

Explanation
These are order entry checkboxes for a doctor to order chemical allergy blood tests.
There are some chemicals (ID begins with "S") that can only be tested for E type antibodies
There are some chemicals (ID begins with "C") that can be tested for E, G, and G4 antibodies.

Example
JS Fiddle App Example

Only G and G4 can be checked for Annatto, Orris Root, Papain, and Pyrethrum


Unchecked

Unchecked

Checked

Checked

I have disabled the checkboxes G and G4 for the "IDs that begin with "S" with this JS:

JavaScript

const dc = ['S057','S021','S028','S058','S024','S042','S029','S013','S003','S072','S079','S034','S027','S082','S017','S085','S087','S093','S002','S015','S018','S090',]
for (id in dc){
   document.getElementById(dc[id] + '2').disabled = true;  // "2" is G
   document.getElementById(dc[id] + '3').disabled = true;  // "3" is G4
}

In this example I would like to change the opacity to 0.25 for the G and G4 checkboxes for Quinoline Yellow (#10)

The problem

While I can disable the checkboxes, I want to indicate to the doctor that the G and G4 selections are not available by dimming the text e.g. "G" and "G4".

I do not know how to express this in JS: .g > input + span::before{

What would go where the questions marks are in this expression:
(Or other what other Selector could be used)

document.getElementById(????????).style.opacity = 0.25;

If you have any other idea on how to do this, I have full control to alter CSS, HTML, and JS.
The above example I tried is likely ill-fated so do not get biased into thinking this is the way it needs to be done.

The page is generated with PHP.
The JS const dc is created in the PHP.
When the id begins with "S", I add that ID to the JS dc array.
I have lots of flexibility for any new ideas you can fathom.

if(substr($id,0,1) == 'S'){
  $js_dc .="'$code',";
}

Full Checkbox CSS

.dchk{font:700 .8em Arial,sans-serif;display:inline-block;padding:0;margin:0;vertical-align: middle;position: relative;}
.dchk{text-align:left;}
.chk {margin: 0;display: inline-block;height:0;cursor: pointer;position: relative;}
.chk > span {color: #fff; padding: 0; margin:0; height:0; display: inline-block;}
.chk > input {height: 1.3em;width: 1.5em;margin:0 1px 0 1px;padding:4px 0 0 0 ;appearance: none; border: 1px solid #000;border-radius: 4px;outline: none;transition-duration: 0.4s;cursor: pointer;}
.chk > input:checked {border: 1px solid #000;}
.chk > input:checked + span::before {font-weight:700;content: '✓';color: #fff; display: block;text-align: center;position: absolute;left: 0.34rem;top: -0.02rem;}
.chk > input:active {border: 2px solid #000;}
.e  > input{background-color: #f7f7fb;}
.e  > input:checked{background-color: #f00;}
.e  > input + span::before {font-weight:400;content: 'E';color:#000;display: block;text-align: center;position: absolute;left: 0.44rem;top: 0.12rem;}
.g4 > input{background-color: #f7f7fb;}
.g4 > input:checked{background-color: #ff0;}
.g4 > input + span::before {font-weight:400;content: 'G4';color:#000;display: block;text-align: center;position: absolute;left: 0.19rem;top: 0.12rem;}
.g  > input{background-color: #f7f7fb;}
.g  > input:checked{background-color: #00f;}
.g  > input + span::before {font-weight:400;content: 'G';color:#000;display: block;text-align: center;position: absolute;left: 0.36rem;top: 0.12rem;}
.g,.e > input:checked + span::before {color: #fff;}
.g4 > input:checked + span::before {color: #000;}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    What I learned here was valuable to me. Thank You.
    I did create a JavaScript routine that solved the problem.

    LIKNK to JS Fiddle JavaScript Solution.

    But I did not use it.
    I prefer an PHP/HTML solution.
    All my HTML is generated in PHP

    Here is how I solved the issue.

    I added two classes (dim and disable) to the <span> that is styled to look like the check box.

    The PHP to generate the checkboxes:

    foreach($selected as $code => $types){
  $dim = '';
  $disable = '';
  if(substr($code,0,1) == 'S'){
    $dim = ' class="dim"';
    $disable = 'disabled';
  }
  if($types[0] == 5){echo '<p class="cat">' . $selected[$code][4] . "</p>n";$none = "<p class="none">No " . $selected[$code][4] . '</p>';continue;}
  if(strlen($code) < 4){continue;}
  echo "<div class="row">
<div class="dchk"><label class="e chk"> <input type="checkbox" id="$code" . "1" class="chk" name="a$code" . "1" value="1" " . $checkmark[$types[1]] . "/><span></span></label></div>
<div class="dchk"><label class="g4 chk"><input type="checkbox" id="$code" . "3" class="chk" name="a$code" . "3" value="3" " . $checkmark[$types[3]] . "$disable/><span $dim></span></label></div>
<div class="dchk"><label class="g chk"> <input type="checkbox" id="$code" . "2" class="chk" name="a$code" . "2" value="2" " . $checkmark[$types[2]] . "$disable/><span $dim></span></label></div>
<div class="inline">&nbsp;" . $types[4] . "</div></div>n";

}

    The HTML Generated:
    The changed HTML classes are added to the span> at the end of the line.

    When the checkbox id begins with a "C"

    <span></span>

    When the checkbox id begins with an "S"

    <span  class="dim"></span></label></div>

    Here is two rows of three checkboxes per row. One with a C and one with S

    <div class="row">
<div class="dchk"><label class="e chk"> <input type="checkbox" id="C0081" class="chk" name="aC0081" value="1" /><span></span></label></div>
<div class="dchk"><label class="g4 chk"><input type="checkbox" id="C0083" class="chk" name="aC0083" value="3" /><span ></span></label></div>
<div class="dchk"><label class="g chk"> <input type="checkbox" id="C0082" class="chk" name="aC0082" value="2" /><span ></span></label></div>
<div class="inline">&nbsp;Pyrethrum</div></div>
<div class="row">
<div class="dchk"><label class="e chk"> <input type="checkbox" id="S0171" class="chk" name="aS0171" value="1" /><span></span></label></div>
<div class="dchk"><label class="g4 chk"><input type="checkbox" id="S0173" class="chk" name="aS0173" value="3" disabled/><span  class="dim"></span></label></div>
<div class="dchk"><label class="g chk"> <input type="checkbox" id="S0172" class="chk" name="aS0172" value="2" disabled/><span  class="dim"></span></label></div>
<div class="inline">&nbsp;Quinoline Yellow (#10)</div></div>

  2. 0

    You can use document.querySelectorAll to fix your problem

    CSS

    .dim::before{
  opacity: 0.3; 
}

    then, add class for element by javascript

    var elements = document.querySelectorAll(".g  > input[id^=S] + span")
elements.forEach(element=>{
  element.className += " dim"
})
elements = document.querySelectorAll(".g4  > input[id^=S] + span")
elements.forEach(element=>{
  element.className += " dim"
})

    please see:https://jsfiddle.net/nfrap0hd/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search