JSFiddle - React, Tailwind, and code Playground

by Fernando Leal

HTML

<div id="overlay">
    <input type="button" class="btn btnSetForm" value="Enable form. Hide overlay"/>
</div>
<form name="form">
    <input type="text" value="aaa" />
    <input type="button" value="aaa" />
    <input type="checkbox" value="aaa" />
    <input type="color" value="aaa" />
    <input type="date" value="aaa" />
    <input type="datetime" value="aaa" />
    <input type="datetime-local" value="aaa" />
    <input type="email" value="aaa" />
    <input type="file" value="aaa" />
    <input type="hidden" value="aaa" />
    <input type="image" value="aaa" />
    <input type="month" value="aaa" />
    <input type="number" value="aaa" />
    <input type="password" value="aaa" />
    <input type="radio" value="aaa" />
    <input type="range" value="aaa" />
    <input type="reset" value="aaa" />
    <input type="search" value="aaa" />
    <input type="submit" value="aaa" />
    <input type="tel" value="aaa" />
    <input type="time" value="aaa" />
    <input type="url" value="aaa" />
    <input type="week" value="aaa" />
</form>
<div class="btnSend">
    <input type="button" class="btn btnSetForm" value="Disable form. Show overlay"/>
</div>

CSS

form{
    border: 1px solid black;
    padding: 5px;
}

form.disabled{
    background: #ccc;
}

form.disabled input{
    background: #ccc;
    /* como desabilitar todos os inputs deste form com css, sem usar javascript? */
    /* ou no minimo como nĂŁo permitir da o foco no inputs quando o form estiver desabilitado */
}

div#overlay{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(200, 200, 200, .6);
    z-index: 100;
    display: none;
    text-align: center;
}

div#overlay.show{
    display: block;
}

div#overlay > .btn{
    position: absolute;
    width: 200px;
    margin-left: -100px;
    top: 50%;
}

div.btnSend{
    text-align: center;
    margin: 50px;
}

JavaScript

$(function(){
    $('.btnSetForm').click(function(){
        $('form').toggleClass('disabled');
        $('#overlay').toggleClass('show');
    });
});