Disable the text inside the div in addition to the checkbox

The following code in this JSFiddle is disabling the other checkboxes when Test 1 checkbox is clicked. But I want Test 2,Test 3 and Test 4 to also look like it’s disabled in addition to the checkboxes. Is it possible to achieve something like this? Pasting the code below as well.

HTML Code:

<span class="instructions">
   <div>
      <input type="checkbox" name="progress" id="progress1" value="1" tabIndex="1" onClick="ckChange(this)">
   </div>
   <div>
      Test 1
   </div>
</span>
<span class="instructions">
   <div>
      <input type="checkbox" name="progress" id="progress2" value="1" tabIndex="1" onClick="ckChange(this)">
   </div>
   <div>
      Test 2
   </div>
</span>
<span class="instructions">
   <div>
      <input type="checkbox" name="progress" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)">
   </div>
   <div>
      Test 3
   </div>
</span>
<span class="instructions">
   <div>
      <input type="checkbox" name="progress" id="progress4" value="1" tabIndex="1" onClick="ckChange(this)">
   </div>
   <div>
      Test 4
   </div>
</span>

Javascript Code:

function ckChange(ckType){
    var ckName = document.getElementsByName(ckType.name);
    var checked = document.getElementById(ckType.id);

    if (checked.checked) {
      for(var i=0; i < ckName.length; i++){

          if(!ckName[i].checked){
              ckName[i].disabled = true;
          }else{
              ckName[i].disabled = false;
          }
      } 
    }
    else {
      for(var i=0; i < ckName.length; i++){
        ckName[i].disabled = false;
      } 
    }    
}

If you simplify your html a bit - you REALLY shouldn’t have block elements inside inline elements (which a span is)…

<div class="instructions">
      <input type="checkbox" name="progress" id="progress1" value="1" tabIndex="1" onClick="ckChange(this)">
      <label for="progress1">Test 1</label>
      <input type="checkbox" name="progress" id="progress2" value="1" tabIndex="1" onClick="ckChange(this)">
      <label for="progress2">Test 2</label>
      <input type="checkbox" name="progress" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)">
      <label for="progress3">Test 3</label>
      <input type="checkbox" name="progress" id="progress4" value="1" tabIndex="1" onClick="ckChange(this)">
      <label for="progress4">Test 4</label>
</div>

then add a little css (change the css for the label to however you want it to look. I used red for demo purposes.

label {display:block; }
input:disabled + label { color: red;}

and voila
image image

Just out of curiosity - why aren’t you just using a set of radio buttons or a dropdown if you’re only going to allow one value to be selected any way?

Thanks very much. I think I didn’t share the complete picture of how HTML is present in my code. It’s actually like this inside a tr tag of a table and what I was testing in HTML of JSFiddle is slightly different than the below code I think.

<tr>
   <td colspan="2">
      <div id="colorOptions">
         <ul class="checkboxTests">
            <li class="checkboxTests">
               <span class="instructions">
                  <div class="testCheckbox">
                     <input type="checkbox" id="progress2" name="progress2" value="p3"  disabled=""> 
                  </div>
                  <div disabled="" class="testDescription">
				  Test 1
				  </div>
               </span>
            </li>
            <li class="checkboxTests">
               <span class="instructions">
                  <div class="testCheckbox">
                     <input type="checkbox" id="progress2" name="progress2" value="p4" >
                  </div>
                  <div class="testDescription">
                     Test 2
                  </div>
               </span>
            </li>
            <li class="checkboxTests">
               <span class="instructions">
                  <div class="testCheckbox">
                     <input type="checkbox" id="progress2" name="progress2" value="pY"  disabled=""> 
                  </div>
                  <div class="testDescription">
                     Test 4
                  </div>
               </span>
            </li>
            <li class="checkboxTests">
               <span class="instructions">
                  <div class="testCheckbox">
                     <input type="checkbox" id="progress2" name="progress2" value="p5" >
                  </div>
                  <div class="testDescription">
                     Test 4
                  </div>
               </span>
            </li>
         </ul>
      </div>
   </td>
</tr>

In this case, if you notice, the id and name are same in the code which is progress2 .

Questions:

  1. Do you think the same id is going to create any issues?

  2. Is using span tag inside li tag and then using div inside still considered bad idea?

  3. Should the code inside li tag be still converted to label just like you mentioned?

Btw - this is someone else’s code I’m making changes to so I’m open to suggestions and it’s not something I’ve written it.

It’s the divs wrapping the checkboxes and the 'labels" which are incorrect, both from a markup and a semantic sense.

  • spans (inline elements) cannot contain divs (block level elements)
  • there’s nothing tying the text to the checkboxes - a screen reader would have fits.
  • I’m guessing this is only test purposes, but the values from the checkboxes will have no affect on the backend because they’re all set to 1 (server languages use name instead of id when processing forms)

Because the input is inside the div, there’s no way to use it’s state to affect something in a different div. And they’re not needed as I’ve shown. My version is more semantically correct because it ties the labels to the appropriate checkbox, and the actions taken on that checkbox will then affect the label, which is what you want.

But this code works just as well and is semantically more correct. Replace the html in your fiddle with this and my css still works.

<table>
<tr>
   <td colspan="2">
      <div id="colorOptions">
         <ul class="checkboxTests">
            <li class="checkboxTests">
              <input type="checkbox" name="progress" id="progress1" value="1" tabIndex="1" onClick="ckChange(this)">
              <label for="progress1">Test 1</label>
            </li>
            <li class="checkboxTests">              
      <input type="checkbox" name="progress" id="progress2" value="1" tabIndex="1" onClick="ckChange(this)">
      <label for="progress2">Test 2</label>
            </li>
            <li class="checkboxTests">      <input type="checkbox" name="progress" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)">
      <label for="progress3">Test 3</label>
            </li>
            <li class="checkboxTests">      <input type="checkbox" name="progress" id="progress4" value="1" tabIndex="1" onClick="ckChange(this)">
      <label for="progress4">Test 4</label>
</li>
         </ul>
      </div>
   </td>
</tr>
</table>
2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.