javascript - Issue in disabling button from another form to another -

javascript - Issue in disabling button from another form to another -

this question has reply here:

event on disabled input 8 answers

i'm making single page website , using jquery show , hide form switching.

i want after user click sec link show , first 2 buttons unable , after user click 3rd link unable buttons. , if user click first link disable two , three buttons.

my problem after click sec link buttons unable same 3rd link after clicked.

current output: http://jsfiddle.net/gzsh6/92/

script:

$('#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); });

well, firstly, shouldn't have html elements same id. cause problems. secondly, recommend using .attr() (attribute) method instead of .prop().

i amended code these changes , working, although might want review approach , have 1 re-create of each button on page, or, if want have them repeated each div, set attributes fixed, never appear change.

i have included code these modifactions below, have forked jsfiddle changes. can check out here: 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>&nbsp;<br /> <button class="btnd btnd-default" id="firsttwo">educational info</button>&nbsp;<br /> <button class="btnd btnd-default" id="firstthree">employment info</button> </center> </div> </div> <div class="page sec hide"> <div class="row"> <center> sec page <br /> <button class="btnd btnd-default" id="secondone">personal info</button>&nbsp;<br /> <button class="btnd btnd-default" id="secondtwo">educational info</button>&nbsp;<br /> <button class="btnd btnd-default" id="secondthree">employment info</button> </center> </div> </div> <div class="page 3rd hide"> <div class="row"> <center> 3rd page <br /> <button class="btnd btnd-default" id="thirdone">personal info</button>&nbsp;<br /> <button class="btnd btnd-default" id="thirdtwo">educational info</button>&nbsp;<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); }; }); }); });

javascript jquery html html5 twitter-bootstrap-3