JSFiddle - React, Tailwind, and code Playground

by Dmitry

HTML

<!-- Works fine in IE -->
<div>
	<label>
        <img src="http://s5.tinypic.com/2youavb_th.jp" alt="" />
		<input type="checkbox" name="afternoon[]" value="1" />
	</label>
</div>

<!-- Doesn't work in IE -->
<form>
<div>
	<label for="afternoon-1">
        <img src="http://s5.tinypic.com/2youavb_th.jp" alt="" />
    	<input type="checkbox" name="afternoon[]" value="1" id="afternoon-1" />2
	</label>
</div>
</form>

JavaScript

var already_clicked = false;
$("label[for]").each(function(){
    var timeout;
    var element = $("#" + $(this).attr("for"));
    $(this).on("click", function(e){
        if ( already_clicked === true ) {
            e.preventDefault();
            already_clicked = false;
            return;
        }
        already_clicked = true;
        setTimeout(function () {
            element.click();
        }, 100);
    });

});