是否有jQuery插件用于有条件地禁用表单（不提交）？

我正在使用jquery1.7.2

我不想阻止表单提交。我想模拟所有输入的禁用属性。可能会添加和删除此属性

我有一份带有输入和提交的表格：

<form name="login" id="login" method="post" action="">
    <label>Password</label>
    <input class="text" id="password" name="password" />
    <button type="submit">Login</button>
</form>

密码
登录

再往下一页a有另一个表单，我想阻止它，除非填写了登录表单

<form id="form" method="post" action="">
    <label>Enter Phone Number</label>
    <input id="areacode" name="areacode" maxlength="3" class="required number" type="text" pattern="[0-9]*" />
    <input id="phoneone" name="phoneone" maxlength="3" class="required number" type="text" pattern="[0-9]*" />
    <input id="phonetwo" name="phonetwo" maxlength="4" class="required number" type="text" pattern="[0-9]*" />
    <button id="phone_submit" type="submit">Next</button>
</form>

输入电话号码
下一个

现在我想阻止用户填写此表单，而不是提交。如果禁用javascript等，后端将阻止该操作。在有效提交时，后端还将向第一个表单的输入字段发送“readonly”属性

因此jQuery基本上可以查看第一个表单输入是否为只读，如果不是，则禁用另一个表单。我不想隐藏它，我只想所有的字段和按钮被禁用

我认为应该已经有一个插件可以做类似的事情，或者一个jquery函数至少可以检查第一个表单的输入字段。到目前为止，我已经：

<script type="text/javascript">
    $(window).load(function(){
        if $('#password').attr('readonly',true){
            $('#areacode').attr('disabled',true);
            $('#phoneone').attr('disabled',true);
            $('#phonetwo').attr('disabled',true);
            $('#phone_submit').attr('disabled',true);
    };
</script>

$（窗口）。加载（函数（）{
if$（'#password'）.attr（'readonly'，true）{
$（“#区号”）.attr（'disabled'，true）；
$（'phoneone'）.attr（'disabled'，true）；
$（'phonetwo'）.attr（'disabled'，true）；
$（'phone#u submit'）.attr（'disabled'，true）；
};

或者，您可以使用以下方法实现此目的：

$('#divID').modal().show();
$('#divID').modal().close();

---

我尝试了一些与表单处理有点类似的新方法，但如果您不想，可以基于其他字段显示或隐藏元素。 幸运的是，因为我很懒，要改变它的行为，你只需要改变2行代码

它仍然非常基本，没有经过适当的测试，但你可以在我的网站上找到源代码 （更改第125行和第127行）

和我的html5form polyfill一起在

即使不是您所需要的，代码也可能会帮助您朝着正确的方向思考

编辑 正在添加代码，因为明显的懒惰服务器；）

用法如下：

---

$（'form'）.relate（{…}）；

和一些html数据属性

我用一个简单的if语句来实现这一点，并显示和隐藏一个覆盖。我首先添加了一个禁用的属性，但我想要覆盖，所以这两种方式都没有意义

虽然不像某些人希望的那样具有语义，但它可以完美地工作。下面的代码是内联样式，以便于阅读

sooooo…html:

<form>
    <input id="password" type="text" />
    <button type="submit">Submit</button>
</form>
<fieldset style="position: relative;">
    <div class="overlay" style="width:100%;height:100%; position: absolute; top:0; left:0; background: rgba(0,0,0,0.5); color: #fff;">You must fill out the password above.</div>
    <form></form>
</fieldset>

提交
您必须填写上面的密码。

js:

$（文档）.ready（函数（）{
var block=false；
if（$（'#password'）.attr（'readonly'））{
block=false；
}否则{
block=true；
}
如果（块）{
$（'.overlay'）.css（'display'，'block'）；
}
});

现在，当后端将密码设置为只读时，您可以使用字段集中的表单。如果#password输入中没有readonly属性，则表单将被有效阻止。当然，与往常一样，如果有人决定用firebug或其他东西删除覆盖，则后端代码会阻止表单提交

---

谢谢你的帮助。

我无法将其置于模式中。不过，谢谢你的建议。很有趣，从任何地方访问我的网站都不会遇到问题。我会将代码粘贴到我的邮件中。但是它有点长。我现在可以查看链接了。可能今天早些时候出现了间歇性问题。

<form>
    <input id="password" type="text" />
    <button type="submit">Submit</button>
</form>
<fieldset style="position: relative;">
    <div class="overlay" style="width:100%;height:100%; position: absolute; top:0; left:0; background: rgba(0,0,0,0.5); color: #fff;">You must fill out the password above.</div>
    <form></form>
</fieldset>

<script type="text/javascript">
    $(document).ready(function() {
        var block = false;
        if ($('#password').attr('readonly')) {
            block = false;
        } else {
            block = true;
        }
        if (block) {
            $('.overlay').css('display','block');
        }
    });
</script>