Mark Checkboxes as N/A

index.html

<h1>Mark Checkboxes as "N/A"</h1>
<ul id="list">
  <li>
    <input type="checkbox" id = "box1"/>
    <label for="box1"><span>Checkbox1</span></label>
    <span class = "box1-na">N/A</span>
  </li>
  <li>
    <input type = "checkbox" id = "box2"/>
    <label for = "box2">Checkbox2</label>
    <span class = "box1-na">N/A</span>
  </li>
  <li>
    <input type = "checkbox" id = "box3"/>
    <label for = "box3">Checkbox3</label>
    <span class = "box3-na">N/A</span>
  </li>
</ul> 

Mark-Checkboxes-as-N-A.markdown

Mark Checkboxes as N/A

Mark checkboxes as N/A using a custom checkboxes via an icon font & a bit of JQuery

A Pen by James Barnett on CodePen.

License.

script.js

$(document).ready(function(){
  $( "span[class*='na']" ).click(function() { 
    if ($( this ).hasClass( "na" ) !== true) {
      $(this).addClass("na");
      $(this).siblings( "input" ).attr("disabled", true); 
      $(this).siblings( "input" ).attr("checked", false); 
    }
    else {
      $(this).siblings( "input" ).attr("disabled", false); 
      $(this).removeClass("na");
    }
  });
});

style.css

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

/*** Basic Styles ***/ 
body { 
  margin: 30px auto; 
  width: 500px; 
  font-size: 24px;
} 

h1 { font-size: 1.5em; }

ul { 
  margin-left: 10px; 
  padding: 0;
}

ul li {
  list-style: none;
  position: relative;
  padding-left: 50px;
}

/*** Custom Checkboxes ***/

/* to hide the checkbox itself */
input[type=checkbox] { 
  display:none;
  position: relative;
} 

input[type=checkbox] + label:before, input[type=checkbox]:checked + label:before {
  font-family: FontAwesome;
  display: inline-block;
  vertical-align: middle;
}

/* checkbox w/ space between label & checkbox */
input[type=checkbox] + label:before { 
  content: "\f096 "; 
  letter-spacing: 19.5px;
  line-height: 17px;
} 

input[type=checkbox]:checked + label:before { 
  content: "\f046"; 
  letter-spacing: 12px;
} 

/*** Mark as N/A ***/

span[class$="na"] { 
  visibility: hidden; 
  font-size: 16px;
}

/* N/A button */
ul li:hover > span[class*="na"] { 
  position: absolute;
  left: -5px;
  top: 5px;
  padding: 0 5px;
  
  opacity: 0.5;
  visibility: visible;
  border: 1px dotted;
  border-radius: 5px;
  cursor: pointer;
} 

/* N/A replace checkbox */
input[type=checkbox]:disabled + label { opacity: 0.5; }
input[type=checkbox]:disabled + label:before { 
  display: inline-block;
  margin: 0 20px 5px 1px;
  font-size: .5em;
  letter-spacing: -2px;
  content:"N/A"; 
}

/* change style for N/A button when active. Use list ID to win specifity battle */
#list .na { opacity: 1.0; }