Disabled div

disabled event on div and all functionality with jquery javascript by norlihazmey ghazali

by Norlihazmey Ghazali

HTML

<!-- first page -->
<input type="checkbox" class="myCheckbox" data-target="firstDiv" />First
<br/>
<input type="checkbox" class="myCheckbox" data-target="secondDiv" />Second
<hr/>
<!-- Second page -->
<div id="firstDiv" class="myDiv">HEllo 1st DIV</div>
<div id="secondDiv" class="myDiv">HEllo 2nd DIV</div>

CSS

.myDiv {
    padding:5px;
    border:1px solid black;
    background-color:blue;
    color:white;
    margin:2px;
}
.disabled {
    background-color:grey;
    color : #C0C0C0;
    opacity : 0.1;
}

JavaScript

$(document).on('click', '.myCheckbox', function () {
    var target = $(this).data('target');    
    if ($(this).is(':checked')) {
        $('#' + target).addClass('disabled').css('pointerEvents','none');
    }
    else {
        $('#' + target).removeClass('disabled').css('pointerEvents','auto');;
    }
});

$('.myDiv').on('click mouseover',function(){
    alert($(this).text());
});