Disabled div

disabled event on div and all functionality with jquery javascript 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 notEditable">
Add1:<input type="text" value="test" class="change"><br/>
Add2:<input type="text" value="test" class="change">
</div><br/>
<div id="secondDiv" class="myDiv notEditable">
  Fax1:<input type="text" value="hello" class=" ddd pp"><br/>
  Fax2:<input type="text" value="hello" class="abc ddd">
</div>

CSS

.abc {
    border:0;
}

.pp:read-only {
  background: tomato;
}
.notEditable {
    border:0;
    color : #000000;
    opacity : 0.8;
}

JavaScript

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