JSFiddle - React, Tailwind, and code Playground

by Weston Ruter

HTML

<p><input type="number" name="foo" value="1" />
<p><input type="number" name="foo" value="2" disabled />
<p><input type="number" name="foo" value="3" />
<fieldset disabled>
    <p><input type="number" name="foo" value="4" />
    <p><input type="number" name="foo" value="5" disabled />
    <p><input type="number" name="foo" placeholder="6" />
</fieldset>
<p><button id=toggleFieldsets>Toggle Fieldset Disabled</button>
<p><button id=toggleInputs>Toggle Inputs Disabled</button>

CSS

:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

JavaScript

console.info( jQuery( 'input' ).serialize() );

$('button#toggleFieldsets').click(function () {
    $('fieldset').each(function () {
        $(this).prop('disabled', !$(this).prop('disabled'));
    })
});

$('button#toggleInputs').click(function () {
    $('input').each(function () {
        $(this).prop('disabled', !$(this).prop('disabled'));
    })
});

$(document.body).on( 'change propertychange input', 'input', function ( e ) {
    console.info( e.type, this.name )
});