JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

$(document).ready(function() {

    $('#buttonProp').on('click', function(){
        $('#checkbox')[0].value = "hi there";
    });
    
    $('#buttonCheck').on('click', function(){
        $('#checkbox').val("hello");
    });
    
    /* 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
    };
     
    var targetNodes = document.getElementById('checkbox');
        observer.observe(targetNodes, observerConfig);  

Object.defineProperty(document.querySelector("#checkbox"), "textContent", {
    set:  function (t) {
        var caller = arguments.callee ? (arguments.callee.caller ? arguments.callee.caller : arguments.callee) : '';
            
 				console.log(t);
        return this.textContent = t;
    }
});

});