我正在使用jQuery 1.7.2。
我不想阻止表单提交。我想模拟所有输入的disabled属性。可能添加和删除此属性。
我有一个带输入的表单并提交：
<form name="login" id="login" method="post" action="">
<label>Password</label>
<input class="text" id="password" name="password" />
<button type="submit">Login</button>
</form>
在页面下方还有另一个表单，除非填写登录表单，否则我要阻止该表单。
<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本质上可以查看第一个表单输入是否为readonly，如果不是，则禁用另一个表单。我不想隐藏它，我只想要禁用所有字段和按钮。
我认为必须已经有一个插件可以执行类似这样的操作或者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>
答案 0 :(得分：0)
或者，您可以使用以下方法实现此目的：
$('#divID').modal().show();
$('#divID').modal().close();
答案 1 :(得分：0)
我尝试了一些与表单处理有些相似的新功能，但是你不想要，显示或隐藏基于其他字段的元素。 幸运的是，因为我懒惰，要改变它的行为，你只需要改变2行代码。
它仍然非常基础且未经过适当测试，但您可以在我的网站上找到该来源 http://geuze.name/html5form/html5form.relate.js（更改第125和127行）
上与我的html5form polyfill一起快速演示即使不完全符合您的要求，代码也可能只是帮助您思考正确的方向。
修改 因为明显的懒惰服务器而添加代码;）
/*
* Form Relationship Plugin - jQuery plugin
* Version 0.2
*
* Built for the jQuery library
* http://jquery.com
*
* Plugin allows you to easily add smart relations between form fields and other elements
*
*
*/
(function($){
$.fn.relate = function(options){
// Uncomment string below during testing
"use strict";
var tmp = {},
// Default configuration properties
defaults = {
scoreRequired: 1,
scoreOnTrue: 1,
scoreOnFalse: 0,
globalScope: true,
debug: false
},
callbacks = {
oninitialize: function(){},// Runs once per form
onfinish: function(){}// Runs once after no errors
},
opts = $.extend(
{},
defaults,
callbacks,
options
);
// Force debug false on sucky browsers
if(typeof(console) === 'undefined' || typeof(console.info) === 'undefined'){
opts.debug = false;
}
// Our debug output
function debug(str){
if(opts.debug === true){
console.info(str);
}
};
// Helper function to determine object size
function objSize(obj) {
var size = 0, key;
for (key in obj) {
if (obj.hasOwnProperty(key)) size++;
}
return size;
};
// Update per element
// Easier would be to always loop over everything, but I assume this is faster
function update(form){
var related,
currentScore = 0,
scoreOnTrue = 1,
scoreOnFalse = 0;
// Reset score
$('[data-currentscore]').removeAttr('data-currentscore');
// Loop all possible smart elements
$('select[data-relate], select:has(option[data-relate]), input[data-relate], textarea[data-relate]', form).each(function(){
if($(this).is('select')){
$('option', this).each(function(){
// Find relation
related = $(this).attr('data-relate');
// If no relation, no points to anything
if(!related || related.length 0 ? $(this).attr('data-scoreontrue') * 1 : opts.scoreOnTrue;
scoreOnFalse = $(this).filter('[data-scoreonfalse]').length > 0 ? $(this).attr('data-scoreonfalse') * 1 : opts.scoreOnFalse;
if($(this).is(':selected')){
$(related).each(function(){
currentScore = $(this).filter('[data-currentscore]').length > 0 ? $(this).attr('data-currentscore') * 1 : 0;
$(this).attr('data-currentscore', currentScore + scoreOnTrue);
});
} else {
$(related).each(function(){
currentScore = $(this).filter('[data-currentscore]').length > 0 ? $(this).attr('data-currentscore') * 1 : 0;
$(this).attr('data-currentscore', currentScore - scoreOnFalse);
});
}
});
} else {
// Find relation
related = $(this).attr('data-relate');
// If no relation, no points to anything
if(!related ||related.length 0 ? $(this).attr('data-scoreontrue') * 1 : opts.scoreOnTrue;
scoreOnFalse = $(this).filter('[data-scoreonfalse]').length > 0 ? $(this).attr('data-scoreonfalse') * 1 : opts.scoreOnFalse;
if($(this).is('input:radio') || $(this).is('input:checkbox')){
if($(this).is(':checked')){
$(related).each(function(){
currentScore = $(this).filter('[data-currentscore]').length > 0 ? $(this).attr('data-currentscore') * 1 : 0;
$(this).attr('data-currentscore', currentScore + scoreOnTrue);
});
} else {
$(related).each(function(){
currentScore = $(this).filter('[data-currentscore]').length > 0 ? $(this).attr('data-currentscore') * 1 : 0;
$(this).attr('data-currentscore', currentScore + scoreOnFalse);
});
}
} else if($(this).val() !== '' && $(this).val() != $(this).attr('placeholder')){
$(related).each(function(){
currentScore = $(this).filter('[data-currentscore]').length > 0 ? $(this).attr('data-currentscore') * 1 : 0;
$(this).attr('data-currentscore', currentScore + scoreOnTrue);
});
} else {
$(related).each(function(){
currentScore = $(this).filter('[data-currentscore]').length > 0 ? $(this).attr('data-currentscore') * 1 : 0;
$(this).attr('data-currentscore', currentScore + scoreOnFalse);
});
}
}
});
// Finaly loop over all fields with some sort of score
$('[data-currentscore]').each(function(){
var scoreRequired = $(this).has('[data-scorerequired]') ? $(this).attr('data-scorerequired') * 1 : opts.scoreRequired;
if($(this).attr('data-currentscore') * 1 >= scoreRequired * 1){
$(this).show();
} else {
$(this).hide();
}
});
};
// Loop over all forms requested
this.each(function(){
// Private properties
var form = $(this);
// Init / change / keyup(fixes some browsers on select)
update(form);
$('select[data-relate], select:has(option[data-relate]), input[data-relate], textarea[data-relate]')
.change(function(){
update(form);
}).keyup(function(){
update(form);
});
});
return this;
}
})(jQuery);
用法如下：
$('form').relate({...});和一些html数据属性
答案 2 :(得分：0)
我使用简单的if语句并显示和隐藏叠加层。我首先添加了一个禁用属性，但是我想要叠加，所以两种方式都没有意义。
不像某些人想要的那样语义，但它完美无缺。下面的代码是内联样式以便于阅读。
Soooooo .... 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：
<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>
现在，当后端只读密码时，您可以使用字段集中的表单。如果#password输入中没有readonly属性，则表单将被有效阻止。当然，与往常一样，如果有人决定用firebug或其他东西擦除叠加层，则会有后端代码阻止表单提交。
感谢您的帮助。