从另一个窗体到另一个窗体禁用按钮的问题
Issue in disabling button from another form to another
我正在制作一个单页网站,并使用jquery显示和隐藏表单切换。
我想做的是在用户点击第二个链接后,它会显示,前两个按钮将无法,用户点击第三个链接后,它将无法所有的按钮。如果用户点击第一个链接,它将禁用two
和three
按钮。
我的问题是我点击第二个链接后,所有的按钮都无法点击后的第三个链接相同。
电流输出:http://jsfiddle.net/GZSH6/92/
脚本:
$('#one').prop('disabled', false);
$('#two').prop('disabled', true);
$('#three').prop('disabled', true);
$('.one').click(function(){
$('#one').prop('disabled', false);
$('#two').prop('disabled', true);
$('#three').prop('disabled', true);
});
$('.two').click(function(){
$('#one').prop('disabled', false);
$('#two').prop('disabled', false);
$('#three').prop('disabled', true);
});
$('.three').click(function(){
$('#one').prop('disabled', false);
$('#two').prop('disabled', false);
$('#three').prop('disabled', false);
});
首先,不应该有具有相同ID的HTML元素。这会造成问题。其次,我建议使用。attr()(属性)方法,而不是。prop()。
我用这些变化修改了你的代码,它正在工作,虽然你可能想要审查你的方法,只有一个页面上的每个按钮的副本,或者,如果你想让他们重复每个div,然后设置他们的属性固定,因为他们似乎永远不会改变。
我已经包含了下面这些修改的代码,但我也用这些更改fork了您的JSFiddle。你可以在这里查看:http://jsfiddle.net/QTMR5/1/.
<a href="javascript:void(0)" class="show-page one" data-page="first">First</a>
<a href="javascript:void(0)" class="show-page two" data-page="second">Second</button>
<a href="javascript:void(0)" class="show-page three" data-page="third">Third</a>
<div class="container">
<div class="page first">
<div class="row">
<center>
First Page<br />
<button class="btnd btnd-default" id="firstone">Personal Info</button> <br />
<button class="btnd btnd-default" id="firsttwo">Educational Info</button> <br />
<button class="btnd btnd-default" id="firstthree">Employment Info</button>
</center>
</div>
</div>
<div class="page second hide">
<div class="row">
<center>
Second Page <br />
<button class="btnd btnd-default" id="secondone">Personal Info</button> <br />
<button class="btnd btnd-default" id="secondtwo">Educational Info</button> <br />
<button class="btnd btnd-default" id="secondthree">Employment Info</button>
</center>
</div>
</div>
<div class="page third hide">
<div class="row">
<center>
Third Page <br />
<button class="btnd btnd-default" id="thirdone">Personal Info</button> <br />
<button class="btnd btnd-default" id="thirdtwo">Educational Info</button> <br />
<button class="btnd btnd-default" id="thirdthree">Employment Info</button>
</center>
</div>
</div>
$(document).ready(function () {
$('#firstone').attr("disabled", false);
$('#firsttwo').attr('disabled', true);
$('#firstthree').attr('disabled', true);
$('.one').click(function(){
$('#firstone').attr('disabled', false);
$('#firsttwo').attr('disabled', true);
$('#firstthree').attr('disabled', true);
});
$('.two').click(function(){
$('#secondone').attr('disabled', false);
$('#secondtwo').attr('disabled', false);
$('#secondthree').attr('disabled', true);
});
$('.three').click(function(){
$('#thirdone').attr('disabled', false);
$('#thirdtwo').attr('disabled', false);
$('#thirdthree').attr('disabled', false);
});
var value = 0, progress;
function progressBar() {
progress = setInterval(function () {
var $bar = $('.bar');
if (value >= 100) {
clearInterval(progress);
$('.progress').removeClass('active');
$(".show-page[data-page=Profile]").trigger("click");
} else {
value += 10;
$bar.width(value * 7);
}
$bar.text(value + "%");
}, 800);
};
$(document).ready(function () {
if (typeof (Storage) !== "undefined" && localStorage.getItem('pageToShow')) {
var pageToShow = localStorage.getItem('pageToShow');
$('.page').addClass('hide');
$('.' + pageToShow).removeClass('hide');
};
$('.show-page').click(function () {
var pageToShow = $(this).data('page');
if (pageToShow == "progBar") {
value = 0;
$('.bar').width(0);
$('.progress').addClass('active');
progressBar();
} else {
clearInterval(progress);
};
$('.page').addClass('hide');
$('.' + pageToShow).removeClass('hide');
if (typeof (Storage) !== "undefined") {
localStorage.setItem('pageToShow', pageToShow);
};
});
});
});
相关文章:
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 使用clickToggle并在单击另一个元素时关闭元素
- 使用javascript将动态表从一个html页面打印到另一个html页
- 如何在android中使用phonegap将文件从一个文件夹移动/复制到另一个文件夹
- 如果使用 lodash 将属性存在于另一个对象中,则向对象添加属性
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 从Rally获取一个特定的标记,以便计算另一个字段中的值
- 无法从jquery Mobile导航栏重定向到另一个页面
- 如何在JQuery函数中定义一个值,然后调用另一个函数并使用该值
- 禁用基于rails中另一个字段的字段窗体
- CRM-从另一个窗体检索选定的选项集
- 如何在一个窗体上创建子网格并将其值传递给另一个窗体中的查找
- 制作另一个窗体,该窗体将显示列表(自动完成)并将用作所选字段的值
- 用另一个下拉列表替换窗体上的下拉列表
- 当另一个窗体有焦点时,禁用其中一个窗体
- 在依赖于另一个字段选择的窗体中隐藏表的某个部分
- 从另一个窗体到另一个窗体禁用按钮的问题
- 在另一个窗体上自动更改单选选项
- 当事件发生时(当单击来自另一个表单的另一个按钮时),使用EJS添加HTML元素(窗体中的按钮)
- 隐藏一个窗体并使用按钮显示另一个窗体