我有一个包含3个下拉列表和一个输入字段的表单。
我希望显示“提交”按钮,直到所有字段都已填充,但我似乎无法使其正常工作,因为填写字段时我的“提交”按钮不会重新启用。
我尝试使用的代码是:
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" id="RegCashMove_Frequency_DropDownList">
<option value="0">- - Please select - -</option>
<option value="1">Monthly</option>
<option value="3">Quarterly</option>
<option value="6">Half yearly</option>
<option value="12">Yearly</option>
</select>
</div>
</div>
<div class="form-group pull-right" id="submitAndCancel" style="display: block;">
<div class="col-sm-12">
<button name="RegularCashMovements_Submit_Button" disabled="disabled" class="btn btn-default" id="RegularCashMovements_Submit_Button" type="submit">
<span class="glyphicon glyphicon-ok"></span> Submit
</button>
<button name="RegularCashMovements_Cancel_Button" class="btn btn-default" id="RegularCashMovements_Cancel_Button" type="submit">
<span class="glyphicon glyphicon-remove"></span> Cancel
</button>
</div>
</div>
</div>
</div>
JQuery的
$(document).ready(function () {
<% if (state == "Initial")
{ %>
$('#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);
<%} %>
});
这是我的fiddle。
答案 0 :(得分:1)
使用 removeAttr 删除已停用的属性。您可能想知道 已停用=&#34;&#34; 也会停用DOM元素。
$(document).ready(function () {
var state = "Initial";
if (state == "Initial")
{
function updateFormEnabled()
{
if (verifyAdSettings())
{
$('#RegularCashMovements_Submit_Button').removeAttr('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
}
}
$('#form select').change(updateFormEnabled);
$('#RegCashMove_Amount_TextBox').change(updateFormEnabled);
}
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="form">
<div class="col-sm-12">
<div id="RegCashMoveHeading">
<h3>Set up a new regular cash movement</h3>
</div>
<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="AJ Bell Investcentre">AJ Bell Investcentre</option>
<option value="Funds and Shares Service">Funds and Shares Service</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="AJ Bell Investcentre">AJ Bell Investcentre</option>
<option value="Funds and Shares Service">Funds and Shares Service</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" id="RegCashMove_Frequency_DropDownList">
<option value="0">- - Please select - -</option>
<option value="1">Monthly</option>
<option value="3">Quarterly</option>
<option value="6">Half yearly</option>
<option value="12">Yearly</option>
</select>
</div>
</div>
<div class="form-group pull-right" id="submitAndCancel" style="display: block;">
<div class="col-sm-12">
<button name="RegularCashMovements_Submit_Button" disabled="disabled" class="btn btn-default" id="RegularCashMovements_Submit_Button" type="submit">
<span class="glyphicon glyphicon-ok"></span> Submit
</button>
<button name="RegularCashMovements_Cancel_Button" class="btn btn-default" id="RegularCashMovements_Cancel_Button" type="submit">
<span class="glyphicon glyphicon-remove"></span> Cancel
</button>
</div>
</div>
</div>
</div>
&#13;
答案 1 :(得分:0)
只需将代码中的.attr()
更改为.prop()
,因为将按钮设置为Not Disabled with .attr将无效,有关stackoverflow的许多问题的更多信息:
- difference between prop() and attr() in jQuery and when to use attr() and prop()
- .prop() vs .attr()
- jQuery attr vs prop?
- .prop() vs .attr()