JSFiddle - React, Tailwind, and code Playground
HTML
<p>Used .val('')to prevent chrome from autofilling</p>
<form method="" class="wow">
<label title="Enable" for="enable">Enable</label>
<input id="enable" checked="checked" name="enable" type="checkbox" />
<br/>
<label title="First Name" for="first_name">First Name</label>
<input id="first_name" class="textbox" name="first_name" type="text" />
<br/>
<label title="Last Name" for="last_name">Last Name</label>
<input id="last_name" class="textbox" name="last_name" type="text" />
<br/>
<label title="Age" for="age">Age</label>
<input id="age" class="textbox" name="age" type="text" />
<br/>
<label title="Country" for="country">Country</label>
<input id="country" class="textbox" name="country" type="text" />
</form>
CSS
form {
padding:10%;
}
.wow label {
display:inline-block;
}
.wow input {
display:block;
}
JavaScript
$("input[name='enable']").click(function () {
if ($(this).is(':checked')) {
$('input.textbox:text').attr("disabled", false);
} else if ($(this).not(':checked')) {
var ok = confirm('Are you sure you want to remove all data?');
if (ok) {
var remove = '';
$('input.textbox:text').val('');
$('input.textbox:text').attr("disabled", true);
}
}
});