时间戳

首页 > 解决方案 > 禁用页面上的按钮

javascript - 禁用页面上的按钮

问题描述

我有以下登录页面

登录页面

当我单击创建帐户时，再次显示员工登录按钮。
我如何从这个页面中删除它？
按钮是相同的，并显示在两个页面上？
我不希望该按钮显示在“创建帐户”页面上。

创建帐户页面

这是jsfiddle

$("#form-id").submit(function()
{setTimeout(function(){
alert("Thank you for requesting an  Documentation Center account. Once your request is reviewed by an administrator, you will receive an email with your login credentials."); location.reload();
submit = true;}, 1000);
});
<div class="company-logo-container1">
    <a href=(site.uri)><img src=(site.uri & '/@api/deki/files/12133/Acc_Logo_Black_Purple_RGB.png?origin=mt-web' & {default: wiki.cdn('/skins/styles/elm/logo.svg')})/></a>
</div>




<div id="title-container">
    <div class="login-title"> "ALIP CLIENT PORTAL"; <span class="name">"& DOCUMENTATION CENTER"</span></div>
    /*<p id="login-paragraph"> "Supporting our customers by providing documentation for ALIP." </p>*/
</div>

<div id="acc-login-panel">
    <div id="employee-login">
        //<div id="login-subheader">'ALIP Employees'</div>
        //<p class="employee-text">'ALIP Employees: '</p>
        <form id="registerform" method="link" action="https://acclife-prod.mindtouch.us/Special:SAML?returnto=https://acclife-prod.mindtouch.us">
        <button type="submit" name="deki_buttons[action] [login]" value= "Sign In" class="ui-button ui-button-primary" tabindex="3"><span>'Employee Sign In'</span></button>
    
</form>  
    </div>      
  


<div id="customer-header">'Customers and Partners'</div>
        <div id="customer-login">
            <a id="acc-register">
                <input id="showbutton" onclick="
                    //$('#customer-login').hide();
                    $('#mt-login-form').hide();
                    $('#login-subheader').hide();
                    $('#widget-login-panel').hide();
                    $('#acc-password').hide();
                    $('#acc-register').hide();
                    $('#showbutton').hide();
                    $('#accountrequest').show();
                    $('#hidebutton').show();"
                 readonly="true"
                 type="text" 
                 value="Create an Account" />
            </a>
            
            <a id="acc-password">
                <input id="resetbutton" onclick="
                    //$('#customer-login').hide();
                    $('#mt-login-form').hide();
                    $('#login-subheader').hide();
                    $('#widget-login-panel').hide();
                    $('#acc-password').hide();
                    $('#acc-register').hide();
                    $('#showbutton').show();
                    $('#accountrequest').hide();
                    $('#acc-login-panel').hide();
                    $('#employee-login').hide();
                    $('#hidebutton').show();
                    $('#acce-password-panel').show();
                    $('#widget-password-panel').addClass('widget-panel show active-panel');"
                readonly="true"
                type="text" 
                value="Reset Your Password" />
            </a>
        
        <div id="accountrequest" style="">
        <div id="frame-container" >
        <div>template('Custom/LoginForm');</div>
        </div>
              
        <br />
        <input id="hidebutton" onclick="
            $('#customer-login').show();
            $('#mt-login-form').show();
            $('#login-subheader').show();
            $('#widget-login-panel').show();
            $('#acc-password').show();
            $('#acc-register').show();
            $('#showbutton').show();
            $('#accountrequest').hide();
            $('#hidebutton').hide();"

        readonly="true"
        style="display:none; border:none;color:#000;font-size:1.0em;cursor:pointer;"
        type="text" value="Return to Login"/>
    </div>
    </div>
</div>
    
<div id="acc-password-panel">
        <div id="customer-password-header">'Customers and Partners'</div>
        <div id="password-contents">
            <div id="loginReturn"><a href="/Special:Userlogin">'Return to Login'</a></div>
            <div id="contactSC"><a href="mailto:ALIPDocumentationCenter@act.com">'Contact the Documentation Center'</a></div>
        </div>
</div>

标签： javascripthtmlcss

解决方案

因为您永远不会隐藏在click输入的属性中。

<input id="showbutton" onclick="
    //$('#customer-login').hide();
    $('#mt-login-form').hide();
    $('#login-subheader').hide();
    $('#widget-login-panel').hide();
    $('#acc-password').hide();
    $('#acc-register').hide();
    $('#showbutton').hide();
    $('#accountrequest').show();
    $('#hidebutton').show();"
    readonly="true"
    type="text" 
    value="Create an Account" />

顺便说一句，避免使用 JavaScript 更改整个页面。不要隐藏元素，只需更改页面。如果用户不允许使用 JavaScript 或浏览器版本较旧，则可能会破坏您的逻辑。

推荐阅读