JSFiddle - React, Tailwind, and code Playground

by thecodeparadox

HTML

<div>
    <div>
        <a href='#' onclick='set_checked(false,"checkbox1")'>clear</a>
        <a href='#' onclick='set_checked(true,"checkbox1")'>select</a>
    </div>
    <div>
        <input type='checkbox' name='checkbox1'/>
    </div>
</div>

<div>
    <div>
        <a href='#' onclick='set_checked(false,"checkbox2")'>clear</a>
        <a href='#' onclick='set_checked(true,"checkbox2")'>select</a>
    </div>
    <div>
        <input type='checkbox' name='checkbox2'/>
    </div>
</div>

CSS

.disButton {
    background: transparent;
    border: none;
}
.disButton a {
    text-decoration: none;
    color: #ddd;
}

JavaScript

$('input:checkbox').on('change', function() {
    enable_clear(this, this.checked);
}).change();

function enable_clear(el, checked) {
    var target = $(el).parent('div').prev('div').find('a:contains(clear)');
    if (checked) {
        target.unwrap();
    } else {
        target.wrap($('<button/>', {
            disabled: true,
            'class': 'disButton',
            width: target.width() + 'px'
        }));
    }
}
$('a').on('click', function(e) {
    e.preventDefault();
    var target = $(this).parent().next('div').find('input:checkbox');
    if (!target.is(':checked') && $(this).text() == 'select') target.click();
    if ($(this).text() == 'clear') target.click();
});