In js, make the mark invalid disabled, the timer

<div id="esealSubRight_cbx">
    <p>
        <label >Signature management:</label>
            <input id="subRightWhiteList1" name="subRightWhiteList" type="checkbox" value="14-01-01-00-00-00-00-00-00-00-00" checked="checked">公章管理</input> 
            <input id="subRightWhiteList2" name="subRightWhiteList" type="checkbox" value="14-01-02-00-00-00-00-00-00-00-00" checked="checked">私章管理</input><br>
            <input id="subRightWhiteList3" name="subRightWhiteList" type="checkbox" value="14-01-03-00-00-00-00-00-00-00-00" checked="checked">签章申请</input> 
            <input id="subRightWhiteList4" name="subRightWhiteList" type="checkbox" value="14-01-04-00-00-00-00-00-00-00-00" checked="checked">签章制作</input>
    </p>
</div>

I found a problem. If the disabled attribute is directly added to <div id="esealSubRight_cbx">, the input box in the div cannot be clicked, but the corresponding value can still be received in the background.
So add the disabled attribute to the input boxes one by one, so that the input can't be clicked, and the background can't receive the value.
How to invalidate the input box with js?
$("#subRightWhiteList1").attr("disabled","diabled"); (disabled)
$("#subRightWhiteList1").removeAttr("disabled"); (removed disabled)

function timer(){
    var rolerights = document.getElementById('right.id').value;
    if(rolerights.indexOf("14-00-00-00-00-00-00-00-00-00-00") > -1 ){
        $("#subRightWhiteList1").removeAttr("disabled");
        $("#subRightWhiteList2").removeAttr("disabled");
        $("#subRightWhiteList3").removeAttr("disabled");
        $("#subRightWhiteList4").removeAttr("disabled");
    }else{
        $("#subRightWhiteList1").attr("disabled","diabled");
        $("#subRightWhiteList2").attr("disabled","diabled");
        $("#subRightWhiteList3").attr("disabled","diabled");
        $("#subRightWhiteList4").attr("disabled","diabled");
    }
}
var t1 = window.setInterval("timer()",500);
	
function closeInterval(){
    window.clearInterval(t1);
}

window.setInterval("timer()",500); Here is a timer, which executes the timer() function every 0.5 seconds.
Why are timers used here?
The right.id node is like this: <input id="right.id" name="role.rights" type="hidden" />
If the value of this node changes, I will perform the following other operations, just started thinking Using properties such as onchange, it was later found that they could not monitor the changes brought by the assignment of programs such as js, so I thought of using a timer to check the value every 0.5 seconds, and if there is a change, then do other corresponding operations.