JSFiddle - React, Tailwind, and code Playground

by nerdess

HTML

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
 <input id="checkbox" type="checkbox" name="checkbox" value="1">
 <br>
 <button id="buttonProp">Disable/enable checkbox</button>
 <button id="buttonCheck">Check/uncheck checkbox</button>

JavaScript

$(document).ready(function() {

    $('#buttonProp').on('click', function(){
        $('#checkbox').prop('disabled', !$('#checkbox').prop('disabled'));
    });
    
    $('#buttonCheck').on('click', function(){
        $('#checkbox').prop('checked', !$('#checkbox').prop('checked'));
    });
    
    /* DOM observing */
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            console.log(mutation.type);
        });    
    });
     
    // Notify me of everything!
    var observerConfig = {
        attributes: true, //Set to true if mutations to target's attributes are to be observed.
        childList: true, //Set to true if additions and removals of the target node's child elements (including text nodes) are to be observed.
        characterData: true //to true if mutations to target's data are to be observed.
    };
     
    var targetNodes = document.getElementsByTagName('input');
    for (var i = 0; i < targetNodes.length; i++) {
        console.log(targetNodes[i]);
        observer.observe(targetNodes[i], observerConfig);  
    }



});