JSFiddle - React, Tailwind, and code Playground

by Derek Leung

HTML

<input class="cbox_yes" type="checkbox" name="yes[]" value="01.jpg"
onclick="spenable()" /> OK
<input class="cbox_sp" type="checkbox" name="sp[]" value="01.jpg" disabled />Special<br />

<input class="cbox_yes" type="checkbox" name="yes[]" value="02.jpg"
onclick="spenable()" /> OK
<input class="cbox_sp" type="checkbox" name="sp[]" value="02.jpg" disabled />Special<br />

JavaScript

var ckbx = document.querySelectorAll("input[name='yes[]']");

for (var i = 0; i < ckbx.length; i++) {
    ckbx[i].addEventListener("change", function() {
        var checked = this.checked;
        next(this).disabled = !checked;
    });
}

var ckbx = document.querySelectorAll("input[name='sp[]']");

for (var i = 0; i < ckbx.length; i++) {
    ckbx[i].addEventListener("change", function() {
        var checked = this.checked;
        previous(this).checked = !checked;
        this.disabled = this.checked;
    });
}

function next(elem) {
    do {
        elem = elem.nextSibling;
    } while (elem && elem.nodeType != 1);
    return elem;
}

function previous(elem) {
    do {
        elem = elem.previousSibling;
    } while (elem && elem.nodeType != 1);
    return elem;
}