<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<body>
<button id="btn1" >button1</button>
<button id="btn2">button2</button><br><br>
<p>above the button anabled or disabled</p>
<div id="div">
<button onclick="myClick()">Disable all the button</button>
</div>
<script>
function myClick(fn){
var res=" ";
if(fn=='enabled'){
document.getElementById("btn1").disabled=false;
document.getElementById("btn2").disabled=false;
res='<button onclick="myClick(\'disable\')">disabled all the button</button>';
}
else{
document.getElementById("btn1").disabled=true;
document.getElementById("btn2").disabled=true;
res='<button onclick=myClick(\'enabled\')>enabled all the button</button>';
}
document.getElementById("div").innerHTML=res;
}
</script>
</body>
</html>
