javascript - 禁用从另一种形式到另一种形式的按钮时出现问题

Question

这个问题已经有答案了:

Event on a disabled input (12 个回答)

已关闭 9 年前。

我正在制作一个单页网站，并使用 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);
});

Answer 1

首先，HTML 元素不应该具有相同的 ID。这会引起问题。其次，我建议使用 .attr() (属性)方法而不是 .prop()。

我用这些更改修改了您的代码并且它正在工作，尽管您可能想要检查您的方法并且页面上的每个按钮只有一份副本，或者，如果您想让每个 div 重复它们，则设置他们的属性是固定的，因为他们似乎永远不会改变。

我已将您的代码包含在下面的这些修改中，但我也通过这些更改对您的 JSFiddle 进行了 fork 。您可以在这里查看: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);
        };
    });
});
});