Input checkbox supposedly not set as read-only but css selector picking up styling as if it were read-only

Question

I've included a snippet of the code below.

I've got a toggle (checkbox under the hood) that's got no read-only prop set however it's picking up the styling where the cursor: not-allowed mouse icon is shown.

If you inspect the input checkbox element and do $0.readOnly you'll see it set to false.

Any thoughts on this? I'm lost.

/** EXAMPLE <label class="tgl"> <input type="checkbox" /> <span data-on="1" data-off="0"></span> </label> **/
 .toggle {
     position: relative;
     outline: 0;
     display: inline-block;
     cursor: pointer;
     user-select: none;
}
 .toggle, .toggle:after, .toggle:before, .toggle *, .toggle *:after, .toggle *:before, .toggle + .toggle-btn {
     box-sizing: border-box;
}
 .toggle::selection, .toggle:after::selection, .toggle:before::selection, .toggle *::selection, .toggle *:after::selection, .toggle *:before::selection, .toggle + .toggle-btn::selection {
     background: none;
}
 .toggle span {
     position: relative;
     display: block;
     height: 1.8em;
     line-height: 1.2em;
     text-align: center;
     border-radius: 2em;
     padding: 0.2em 1em;
     border: 1px solid #fafafa;
     transition: color 0.3s ease, padding 0.3s ease-in-out, background 0.3s ease-in-out;
}
 .toggle span:before {
     position: relative;
     display: block;
     line-height: 1.3em;
     padding: 0.2em;
     font-size: 0.75em;
}
 .toggle span:after {
     position: absolute;
     display: block;
     content: '';
     border-radius: 2em;
     width: 1.3em;
     height: 1.3em;
     margin-left: -1.45em;
     top: 0.2em;
     background: #fff;
     transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 0.97), background 0.3s ease-in-out;
}
 .toggle input[type="checkbox"] {
     display: none !important;
}
 .toggle input[type="checkbox"]:not(:checked) + span {
     background: red;
     color: #fff;
     padding-left: 1.6em;
     padding-right: 0.4em;
}
 .toggle input[type="checkbox"]:not(:checked) + span:before {
     content: attr(data-off);
     color: #fff;
}
 .toggle input[type="checkbox"]:not(:checked) + span:after {
     background: #fff;
     left: 1.6em;
}
 .toggle input[type="checkbox"]:checked + span {
     background: green;
     color: #fff;
     padding-left: 0.4em;
     padding-right: 1.6em;
}
 .toggle input[type="checkbox"]:checked + span:before {
     content: attr(data-on);
}
 .toggle input[type="checkbox"]:checked + span:after {
     background: #fff;
     left: 100%;
}
 .toggle input[type="checkbox"]:disabled, .toggle input[type="checkbox"]:disabled + span, .toggle input[type="checkbox"]:read-only, .toggle input[type="checkbox"]:read-only + span {
     cursor: not-allowed;
}
 .toggle-gray input[type="checkbox"]:not(:checked) + span {
     background: #737373;
     color: #999;
}
 .toggle-gray input[type="checkbox"]:not(:checked) + span:before {
     color: #999;
}
 .toggle-gray input[type="checkbox"]:not(:checked) + span:after {
     background: #fff;
}
 .toggle-inline {
     display: inline-block !important;
     vertical-align: top;
}
 .toggle-inline.toggle {
     font-size: 16px;
}
 .toggle-inline.toggle span {
     min-width: 50px;
}
 .toggle-inline.toggle span:before {
     line-height: 1.4em;
     padding-left: 0.4em;
     padding-right: 0.4em;
}
 .toggle-inline-label {
     display: inline-block !important;
     vertical-align: top;
     line-height: 26px;
}
 

<label class="toggle" style="font-size: 20px">
    <input type="checkbox" ng-model="model" ng-click="onToggle()" class="ng-pristine ng-untouched ng-valid ng-not-empty" aria-invalid="false">
    <span data-on="On" data-off="Off"></span>
  </label>