如果未选择下拉选项，则 HTML 禁用提交按钮

Question

我在考虑解决此问题时遇到了一些问题。基本上，如果用户没有从我拥有的下拉列表中选择一个值，我想禁用我的提交/保存按钮。当页面加载时，它默认为“-Select-”选项，但如果用户忘记实际选择一个选项，我会收到服务器错误。我能想到的唯一方法是我之前提到的，如果他们没有选择一个值并且仍然选择“-Select-”选项，则禁用提交/保存。有什么建议吗？

            <tr>
            <td class="fieldName_td">
                @Html.Label("Copy Internal Form Group Actions:")<span class="requiredField">*</span>
            </td>
            <td class="fieldData_td">
                <div id="form_shower">
                    <select id="myselect" name="ddlInternalAssociations">
                        <option value="4" selected="selected">-Select-</option>
                        <option value="1">Remove the association</option>
                        <option value="2">Copy and create new association</option>
                        <option value="3">Maintain the old association</option>
                    </select>
                </div>

                <div class="show-hide" name="form_name1" id="form_name1" style="display:none">

                </div>

                <div class="show-hide" name="form_name3" id="form_name3" style="display:none">

                </div>

            </td>
        </tr>

        <tr>
            <td class="fieldName_td">
                <div class="show-hide" name="form_name2" id="form_name2" style="display:none">
                    @Html.Label("Name for newly created internal form group:") 
                </div>
            </td>
            <td class="fieldData_td">
                <div class="show-hide" name="form_name4" id="form_name4" style="display:none">
                    <input id="newInternalFormName" name="newInternalFormName" type="text" value="@Model.DetailObject.SuggestedInternalFormName" size="25" />
                </div>
            </td>
        </tr>
    }
    <tr>
        <td class="fieldName_td"></td>
        <td class="fieldDataCenter_td">

            @Html.HiddenFor(p => p.returnUrl)
            @Html.HiddenFor(p => p.DetailObject.FormGroupId)
            @Html.NWFormSubmitButtonFor(model => model, "btn_SaveButton", "Save", "btn_SaveButton", "SaveCollection", "disableOnSubmit")

        </td>
    </tr>

Answer 1

您可以使用 jQuery 来：

1. 页面加载测试值并启用/禁用提交按钮

   $(document).ready(function () {
     var selectedVal = $('#myselect').val();
     if(selectedVal == 4) {
       //disable submit button
     } else {
       //enable submit button
     }
   });'
   

2. 跟踪选择的变化

   $('#myselect').change(function() {
     //Check the change and use above logic to disable/enable submit button
   });
   

当然你可以把这段代码用通用方法分组。