如何使用javascript启用和禁用按钮_Javascript_Jquery_Jquery Ui

如何使用javascript启用和禁用按钮

javascript jquery jquery-ui

如何使用javascript启用和禁用按钮,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我们使用MVC弹出式模型，其中有两个文本框SSN编号和DOB（出生日期），我使用日期选择器日历进行DOB，它是只读文本框，对于SSN编号，我手动将编号放入文本框中。我已经编写了以下代码，以便在SSN编号和DOB都正确时启用“下一步”按钮。但下面的代码工作不正常，首先我输入了SSN编号，当我使用日历选择DOB时，下一步按钮不启用，请帮助我解决此问题 $("#SocialSecurityNumber").blur(function () { if ($("#SocialSecuri

我们使用MVC弹出式模型，其中有两个文本框SSN编号和DOB（出生日期），我使用日期选择器日历进行DOB，它是只读文本框，对于SSN编号，我手动将编号放入文本框中。我已经编写了以下代码，以便在SSN编号和DOB都正确时启用“下一步”按钮。但下面的代码工作不正常，首先我输入了SSN编号，当我使用日历选择DOB时，下一步按钮不启用，请帮助我解决此问题

$("#SocialSecurityNumber").blur(function () {

        if ($("#SocialSecurityNumber").val().length == 11 && $("#DateofBirth").val() != '') {
            $("#nextSubmit").removeAttr("disabled");
            $("#nextSubmit").removeClass("btn-default").addClass("btn-primary");
        }
        else {

            $("#nextSubmit").attr("disabled", true);
            $("#nextSubmit").removeClass("btn-primary").addClass("btn-default");

        }

    });

    $("#SocialSecurityNumber").keyup(function () {
        if ($("#SocialSecurityNumber").val().length == 11 && $("#DateofBirth").val() != '') {
            $("#nextSubmit").removeAttr("disabled");
            $("#nextSubmit").removeClass("btn-default").addClass("btn-primary");
        }
        else {

            $("#nextSubmit").attr("disabled", true);
            $("#nextSubmit").removeClass("btn-primary").addClass("btn-default");

        }

    });


    $("#DateofBirth").blur(function () {

        if ($("#DateofBirth").val() !='' && $("#SocialSecurityNumber").val().length == 11) {
            $("#nextSubmit").removeAttr("disabled");
            $("#nextSubmit").removeClass("btn-default").addClass("btn-primary");
        }
        else {

            $("#nextSubmit").attr("disabled",true);
            $("#nextSubmit").removeClass("btn-primary").addClass("btn-default");

        }

    });

    $("#DateofBirth").keyup(function () {
        if ($("#SocialSecurityNumber").val().length == 11 && $("#DateofBirth").val() != '') {
            $("#nextSubmit").removeAttr("disabled");
            $("#nextSubmit").removeClass("btn-default").addClass("btn-primary");
        }

        else {

            $("#nextSubmit").attr("disabled",true);
            $("#nextSubmit").removeClass("btn-primary").addClass("btn-default");

        }
    });

谢谢，

Sandeep

在jquery中，这是禁用按钮的方式

$（'u按钮的'id'）.prop（'disabled'，true）
要启用该按钮
$（'pc_add'）.prop（'disabled'，false）
在html中，按钮应该如下所示
<button id="id_of_the_button"> text of the button </button>

按钮的文本

在这里回答您的问题，您应该如何实现html文件
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">
</script>
<script>
$(document).ready(function(){
     $("#SocialSecurityNumber").keyup(function() {
     if ($("#SocialSecurityNumber").val().length == 11 && $("#DateofBirth").val() != '') {
        $("#nextSubmit").prop('disabled', false);
      } else {
        $("#nextSubmit").prop('disabled', true);
      }
    });

    $('#DateofBirth').change(function() {
         if ($("#SocialSecurityNumber").val().length == 11 && $("#DateofBirth").val() != '') {
         $("#nextSubmit").prop('disabled', false);
        }else {
            $("#nextSubmit").prop('disabled', true);
        }
    });
});


</script>
</head>
<body>

<h2>This is a heading</h2>
  <form>
    <input type="text" id="SocialSecurityNumber" />
    <input type="date" id="DateofBirth" />
    <button id="nextSubmit" disabled="disabled" class="btn btn-default">Submit</button>
  </form>

</body>

</html>


$（文档）.ready（函数（）{
$（“#社会安全号码”）.keyup（函数（）{
if（$（“#社会安全号码”）.val（）.length==11&$（“#出生日期”）.val（）！=''）{
$（“#nextSubmit”）.prop（'disabled'，false）；
}否则{
$（“#nextSubmit”）.prop（'disabled'，true）；
}
});
$（'#DateofBirth'）。更改（函数（）{
if（$（“#社会安全号码”）.val（）.length==11&$（“#出生日期”）.val（）！=''）{
$（“#nextSubmit”）.prop（'disabled'，false）；
}否则{
$（“#nextSubmit”）.prop（'disabled'，true）；
}
});
});
这是一个标题
提交
在输入时使用change
事件，而不是使用blur和keyup
事件


提交
$（“#社会安全号码”）.change（函数（）{
if（$（“#社会安全号码”）.val（）.length==11&$（“#出生日期”）.val（）！=''）{
$（“#下一步提交”）.removeAttr（“禁用”）；
$（“#nextSubmit”）.removeClass（“btn默认”）.addClass（“btn主”）；
}否则{
$（“#nextSubmit”）.attr（“禁用”，真）；
$（“#nextSubmit”）.removeClass（“btn主”）.addClass（“btn默认”）；
}
});
$（“#出生日期”）.change（函数（）{
if（$（“#出生日期”）.val（）！=''&$（“#社会安全号码”）.val（）.length==11）{
$（“#下一步提交”）.removeAttr（“禁用”）；
$（“#nextSubmit”）.removeClass（“btn默认”）.addClass（“btn主”）；
}否则{
$（“#nextSubmit”）.attr（“禁用”，真）；
$（“#nextSubmit”）.removeClass（“btn主”）.addClass（“btn默认”）；
}
});
$（“#出生日期”）.keyup（函数（）{
if（$（“#社会安全号码”）.val（）.length==11&$（“#出生日期”）.val（）！=''）{
$（“#下一步提交”）.removeAttr（“禁用”）；
$（“#nextSubmit”）.removeClass（“btn默认”）.addClass（“btn主”）；
}否则{
$（“#nextSubmit”）.attr（“禁用”，真）；
$（“#nextSubmit”）.removeClass（“btn主”）.addClass（“btn默认”）；
}
});
试试：

$（'#ElememtId'）.prop（“已禁用”，true）

及

$（'#ElememtId'）.prop（“禁用”，false）
请对此发表评论。因此，我们可以了解您希望在这些语句中执行什么操作扫描您是否可以共享您的HTML？至于你写了什么代码，我认为有以下几种情况：1。如果用户仅输入SSN
下一步按钮，则不会启用，因为DOB
字段为空。2.如果用户输入了SSN
并输入了DOB
（不通过任何插件选择日期作为keyup
，blur
将不起作用，但onChange可能），则将启用“下一步”按钮。请在我的HTML下面查找。请在我的HTML下面查找。Html.TextBoxFor（m=>m.DateofBirth，new{class=“DateofBirth form control txtWithImage”，placeholder=“\u//\ uuuuuu0”，readonly=“readonly”}）请在我的Html下面找到。Html.TextBoxFor（m=>m.DateofBirth，new{class=“DateofBirth form control txtWithImage”，placeholder=“\u//\ uuuuuu____;”，readonly=“readonly”}）我已经尝试了你的代码，但是运气不好，当我第二次点击DOB文本框时，下一步按钮是启用的。请再次检查我已经添加了完整的脚本我已经修复了这个问题，在datepicker函数中，我调用了onchange事件，该事件修复了该问题。谢谢你的帮助。哦，好的。谢谢：）大家好，我已经解决了这个问题，在datepicker函数中，我已经编写了关于更改的事件来解决这个问题。请查找下面的代码，谢谢您的帮助。on（'changeDate'，函数（ev）{if（$（“#DateofBirth”）.val（）=''&$（“#SocialSecurityNumber”）.val（）.length==11{var newDate=newDate（ev.Date）newDate.setDate（newDate.getDate（）+1）；$（“#nextSubmit”）.removeAttr（“已禁用”）；$（“#nextSubmit”）.removeClass”）。removeClass(“btn默认值”）.addClass（“btn主”）；}
<!-- To disable button -->
$('#ElememtId').prop("disabled",true)

<!-- To enable button -->
$('#ElememtId').prop("disabled",false)