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，这是非常令人沮丧的lol

如果有帮助，有问题的文件是来自mvc程序的cshtml。

Answer 1

使用change事件来检测值

$("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>

反馈

隐藏/禁用Ajax表单的提交按钮，直到从下拉列表中进行选择

3 个答案: