Issue in disabling button from another form to another

Question

I'm making a single page website and using jquery for show and hide form switching.

I want to do is after the user click the second link it will show up and the first two buttons will be unable and after the user click the third link it will unable all the buttons. And if the user click the first link it will disable the two and three buttons.

My problem is after i click the second link all the buttons are all unable same as the third 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);
});

Late Starter · Accepted Answer · 2014-06-18T00:02:02.590

Well, firstly, you shouldn't have HTML elements with the same ID. That will cause problems. Secondly, I would recommend using the .attr() (attribute) method instead of .prop().

I amended your code with these changes and it is working, although you might want to review your approach and have only one copy of each button on the page, or, if you want to have them repeated for each div, then set their attributes as fixed, as they never appear to change.

I have included your code with these modifactions below, but I have also forked your JSFiddle with the changes. You can check it 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 second hide">
        <div class="row">
            <center>
                Second 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 third hide">
        <div class="row">
            <center>
                Third 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);
        };
    });
});
});

I read a comment of yours earlier regarding the refreshing of the page. I assume you must have subsequently deleted the comment, but if you are still having that issue, you can resolve it in several ways. The most obvious, given your approach, is to add the initial state setters to your first document.ready() method, just below your setting of the buttons for the first div you can initialize the buttons for the second and third divs. — Late Starter, Jun 18 '14 at 03:24

Issue in disabling button from another form to another

1 Answers1