JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div style="padding:50px"> <ul>
                        <li>
                            <label><input type="checkbox">Sample 111</label>
                        </li>
                        <li>
                            <label><input type="checkbox">Sample 22</label>
                        </li>
                        
</ul></div>

CSS

label { border: 1px dashed #000; }
li { background: #e1e1e1; width: 200px; border-top: 1px solid #444; }



/* You won't get accidental selections when clicking the li with these. */
li {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

JavaScript

$('li').on('mousedown', function() {

    var self = $(this),
        input = self.find('input');
    
    self.on("click", function( e ) {
        e.preventDefault();
    });
    
    if ( input.prop("checked") ) {
        var value = false;
    }
    else {
        var value = true;
    }
    
    input.prop("checked", value);


});