JSFiddle - React, Tailwind, and code Playground
HTML
<div class="row">
<div class="col-sm-12">
<div class="form-group" id="FromClass">
<label class="col-sm-offset-3 col-sm-2 control-label">From</label>
<div class="col-sm-6 col-md-4" id="FromDiv">
<select name="RegCashMove_From_DropDownList" class="form-control" id="RegCashMove_From_DropDownList">
<option value="- - Please select - -">- - Please select - -</option>
<option value="AJBIC">AJBIC</option>
<option value="FSS">FSS</option>
</select>
</div>
</div>
<div class="form-group" id="ToClass">
<label class="col-sm-offset-3 col-sm-2 control-label">To</label>
<div class="col-sm-6 col-md-4" id="ToDiv">
<select name="RegCashMove_To_DropDownList" class="form-control" id="RegCashMove_To_DropDownList">
<option value="- - Please select - -">- - Please select - -</option>
<option value="AJBIC">AJBIC</option>
<option value="FSS">FSS</option>
</select>
</div>
</div>
<div class="form-group" id="AmountClass">
<label class="col-sm-offset-3 col-sm-2 control-label">Amount</label>
<div class="col-sm-6 col-md-4" id="AmountDiv">
<div class="input-group">
<div class="input-group-addon">£</div>
<input name="RegCashMove_Amount_TextBox" class="form-control" id="RegCashMove_Amount_TextBox" onblur="FormatCurrency(this);" type="number" step="any" value="" placeholder="0.00">
</div>
</div>
</div>
<div class="form-group" id="FrequencyClass">
<label class="col-sm-offset-3 col-sm-2 control-label">Frequency</label>
<div class="col-sm-6 col-sm-4" id="FrequencyDiv">
<select name="RegCashMove_Frequency_DropDownList" class="form-control"...
JavaScript
$(document).ready(function () { $('#RegularCashMovements_Submit_Button').attr('disabled', 'disabled');
function updateFormEnabled()
{
if (verifyAdSettings())
{
$('#RegularCashMovements_Submit_Button').attr('disabled', '');
}
else
{
$('#RegularCashMovements_Submit_Button').attr('disabled', 'disabled');
}
}
function verifyAdSettings()
{
if ($('#RegCashMove_From_DropDownList').val() != '- - Please select - -' && $('#RegCashMove_To_DropDownList').val() != '- - Please select - -' && $('#RegCashMove_Amount_TextBox').val() != '' && $('#RegCashMove_Frequency_DropDownList').val() != '0')
{
return true;
}
else
{
return false
}
}
$('#RegCashMove_From_DropDownList').change(updateFormEnabled);
$('#RegCashMove_To_DropDownList').change(updateFormEnabled);
$('#RegCashMove_Amount_TextBox').change(updateFormEnabled);
$('#RegCashMove_Frequency_DropDownList').change(updateFormEnabled);
});