隱藏/禁用Ajax表單的提交按鈕，直到從下拉列表中進行選擇為止

Question

我想隱藏（或禁用）Ajax表單的提交按鈕，直到從DropDownList（@ Html.DropDownList）中進行選擇為止

表單如下所示：

@using (Ajax.BeginForm("RoleAddToUser", "Roles", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "middle_column", HttpMethod = "POST" }, new { id = "RoleAddToUserForm" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<p>
    User : @Html.DropDownList("UserName", (IEnumerable<SelectListItem>)ViewBag.Users, "Select ...")
    Role : @Html.DropDownList("RoleName", (IEnumerable<SelectListItem>)ViewBag.Roles, "Select ...")
</p>
<input type="button" name="SubmitBtn1" value="Send" onclick="$('#RoleAddToUserForm').submit(); " />
}

我假設有一種方法可以檢測到選擇了“ select ...”（默認值）以外的其他值，然后使用Javascript啟用/顯示“提交”按鈕。

我也明白這對於大多數Js粉絲來說可能是微不足道的，但是我通常不使用cshtml或javascript，這非常令人沮喪

如果有幫助，則該文件是來自mvc程序的cshtml。

Answer 1

使用變更事件來檢測價值

$("select").on("change",function(){
if($(this).val()){
$("input[name='SubmitBtn1']").prop("disabled",false);
}
esle{
$("input[name='SubmitBtn1']").prop("disabled",true);
}
});

Answer 2

向按鈕添加disabled="disabled"屬性。 這樣它將被禁用。 當您想啟用它時，使用jQuery啟用$('#id').removeAttr('disabled')

Answer 3

我確信還有更多優雅的方法可以解決此問題，但這似乎可行：

我向按鈕添加了id =“ SubmitBtn1” style =“ display：none”然后使用

<script type="text/javascript">
//On change
$('#UserName').change(
function checkValue() {

    //Check if the dropdownlist's value is equal to the default
    if ($('#UserName').val() == "") {

        //if it is, hide it/keep hidden            
        hide_item('SubmitBtn1');

        return
    }

    //otherwise show it
    show_item('SubmitBtn1');

});


function show_item(id) {
    var el = document.getElementById(id);

    el.style.display = 'inline-block';

};

function hide_item(id) {
    var el = document.getElementById(id);

    el.style.display = 'none';

};

</script>

反饋？