JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr>
<td class="labelTD"><label for="manifestNumber">Manifest No.:</label></td>
<td class="detailsTD"><input type="text" class="form-control form-required" placeholder="Manifest Number" name="manifestNumber" id="manifestNumber" required></td>
<td><span class="requiredInput">*</span></td>
</tr>
<tr>
<td class="labelTD"><label for="claimOrigin">Carrier Origin:</label></td>
<td class="detailsTD"><select id="claimOrigin" class="form-control form-required" required name="claimOrigin">
<option></option>
@foreach($origins as $origin)
<option value="{{ $origin->id }}">{{ $origin->customer_name }}</option>
@endforeach
</select></td>
<td><span class="requiredInput">*</span></td>
</tr>
<tr>
<td class="labelTD"><label for="originTerminal">Origin Terminal:</label></td>
<td class="detailsTD"><select class="form-control form-required" required><option selected value="">Please Select</option><option value="CINC-Cincinatti">CINC-Cincinatti</option></select></td>
<td><span class="requiredInput">*</span></td>
</tr>
<tr>
<td class="labelTD"><label for="date">Date Unloaded:</label></td>
<td class="detailsTD"><input type="date" name="claimDate" id="claimDate" class="form-control form-required" required></td>
<td><span class="requiredInput">*</span></td>
</tr>
</table>
<button id="createManifestButton" class="btn btn-primary" disabled>Create New Manifest</button>
JavaScript
(function() {
$('.form-required').change(function() {
var empty = false;
$('.form-required').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#createManifestButton').attr('disabled', 'disabled');
} else {
$('#createManifestButton').removeAttr('disabled');
}
});
})()