-1
ページのすべての必須要素がクリックされるまでボタンを非表示にしようとしています。 1つのアイテムがクリックされるまで要素を非表示にする方法を見つけましたが、ボタンを隠すように設定する方法はわかりませんすべてアイテムをクリックします。HTMLですべての要素がクリックされるまでボタンを非表示にするにはどうすればよいですか？
ユーザーがクリックしたい要素は、「collaspeone」、「collaspetwo」などのIDを持つアコーディオンパネルです。ユーザーが各パネルをクリックして（拡大させる）、各パネルをクリックするとページの下部にボタンを表示し、次のページに進むことができます。
ここには、すべてのパネルをクリックしたときにのみ表示したい要素があります。
<button id="Continue" class="btn btn-primary"><a href="AddSupplier-SubmitReq.aspx" style="color:white">Continue to Set-Up<i class="fa fa-arrow-right" aria-hidden="true"></i></a></button>
は、ここに私の完全なHTMLコード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ Page Language="C#" %>
<%@ Register tagprefix="SharePoint" namespace="Microsoft.SharePoint.WebControls" assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<html lang="en" class="no-js">
<head>
<meta name="WebPartPageExpansion" content="full" />
<meta charset="utf-8"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="canonical" href="http://html5-templates.com/" />
\t <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/>
\t <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/>
\t <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/>
\t <link rel="manifest" href="/manifest.json"/>
\t <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"/>
\t <meta name="theme-color" content="#ffffff"/>
<title>MySLM Portal</title>
\t <meta name="description" content="A minimalist Bootstrap theme by StartBootstrap. Contains everything you need to get started building your website. All you have to do is change the text and images.">
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/modern-business.css" rel="stylesheet"/>
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="css/footer.css" rel="stylesheet" type="text/css"/>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
\t <script>
\t $(document).ready(function(){
\t \t $('.dropdown-submenu a.submenu').on("click", function(e){
\t $(this).next('ul').toggle();
\t e.stopPropagation();
\t e.preventDefault();
\t \t });
\t });
\t </script>
\t
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="https://cargillonline.sharepoint.com/sites/ProcureToPay/SitePages/MySLM/Assets/CargillLogo.png"/>
<a href="Home.aspx"><img src="https://cargillonline.sharepoint.com/sites/ProcureToPay/SitePages/MySLM/Assets/SLMPortal.png"/></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="Scope.aspx">Scope</a>
</li>
<li>
<a href="AddSupplier-FirstSteps.aspx">General Questions</a>
</li>
<li>
<a href="FAQs.aspx">FAQ's</a>
</li>
\t \t \t \t \t <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Processes<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="../Create.aspx" target="_blank">Create a New Supplier</a>
</li>
<li>
<a href="../Update.aspx" target="_blank">Update an Existing Supplier</a>
</li>
<li>
<a href="../Reactivate.aspx" target="_blank">Reactivate a Supplier</a>
</li>
<li>
<a href="../Deactivate.aspx" target="_blank">Deactivate a Supplier</a>
</li>
</ul>
</li>
<li>
<a href="Contact-Us.aspx">Contact</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Resources<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="../ERS.aspx" target="_blank">ERS Agreement Library</a>
</li>
<li>
<a href="../Corp Record List.aspx" target="_blank">Corp Record List</a>
</li>
\t \t \t \t \t \t \t <li>
<a href="../Sanctioned Supplier List.aspx" target="_blank">Sanctioned Supplier List</a>
</li>
\t \t \t \t \t \t \t <li>
<a href="../Supplier Deactivation Listing.aspx" target="_blank">Supplier Deactivation Listing</a>
</li>
<li class="divider"></li>
<li>
<a href="https://team.cargill.com/sites/NAP/HELP/SitePages/RemedyForce.aspx" target="_blank">RemedyForce Training</a>
</li>
<li>
<a href="http://strategicsourcing.cargill.com/PROCUREMENT/procurementwebsite.nsf/" target="_blank">Select Supplier Search</a>
</li>
<li>
<a href="https://www.yammer.com/cargill.com/#/threads/inGroup?type=in_group&feedId=620515" target="_blank">Yammer: Source to Pay NA</a>
</li>
<li class="divider"></li>
<li>
<a href="JobAids.aspx">Job Aids</a>
</li>
\t \t \t \t \t \t \t <li>
<a href="SelfHelp.aspx">Knowledge/Self Help Articles</a>
</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#" class="submenu">Policies<b class="caret"></b></a>
\t \t \t \t \t \t \t <ul class="dropdown-menu">
\t \t \t \t \t \t \t <li><a tabindex="-1" href="https://sites.cargill.com/sites/PolicyCenter/Pages/Spending%20Policies/Sourcing-and-Purchasing-Policy.aspx" target="_blank">Sourcing and Purchasing Policy</a></li>
\t \t \t \t \t \t \t <li class="divider"></li> \t \t \t \t \t
\t \t \t \t \t \t \t <li><a tabindex="-1" href="https://sites.cargill.com/sites/PolicyCenter/Pages/Business%20Conduct%20Pages/Anti-bribery-Policy.aspx" target="_blank">Anti-bribery Policy</a></li>
\t \t \t \t \t \t \t <li><a tabindex="-1" href="https://sites.cargill.com/sites/PolicyCenter/Pages/Financial%20and%20Market%20Risks/Bank-Account--Payment-Control-Policy.aspx" target="_blank">Bank Account & Payment Control Policy</a></li>
\t \t \t \t \t \t \t \t <li><a tabindex="-1" href="https://sites.cargill.com/sites/PolicyCenter/Pages/Business%20Conduct%20Pages/Competition-Policy.aspx" target="_blank">Competition Policy</a></li>
\t \t \t \t \t \t \t \t <li><a tabindex="-1" href="https://sites.cargill.com/sites/PolicyCenter/Pages/Business%20Conduct%20Pages/Conflicts-of-Interest-Policy.aspx" target="_blank">Conflicts of Interest Policy</a></li>
\t \t \t \t \t \t \t \t <li><a tabindex="-1" href="https://sites.cargill.com/sites/PolicyCenter/Pages/Financial%20and%20Market%20Risks/Country-Risk-Policy.aspx" target="_blank">Country Risk Policy</a></li>
\t \t \t \t \t \t \t \t <li><a tabindex="-1" href="https://sites.cargill.com/sites/PolicyCenter/Pages/Business%20Conduct%20Pages/Insider-Trading-Policy.aspx" target="_blank">Insider Trading Policy</a></li>
\t \t \t \t \t \t \t \t <li><a tabindex="-1" href="https://sites.cargill.com/sites/PolicyCenter/Pages/Business%20Conduct%20Pages/Legal-Services-Policy.aspx" target="_blank">Legal Services Policy</a></li>
\t \t \t \t \t \t \t \t <li><a tabindex="-1" href="https://sites.cargill.com/sites/Ethics_Compliance/suppliercode/Pages/default.aspx" target="_blank">Supplier Code of Conduct</a></li>
\t \t \t \t \t \t \t \t <li><a tabindex="-1" href="https://sites.cargill.com/sites/PolicyCenter/Pages/Business%20Conduct%20Pages/Trade-Sanctions-Policy.aspx" target="_blank">Trade Sanctions Policy</a></li>
\t \t \t \t \t \t \t \t <li><a tabindex="-1" href="https://sites.cargill.com/sites/PolicyCenter/_layouts/15/WopiFrame.aspx?sourcedoc=/sites/PolicyCenter/SiteCollectionDocuments/Spending/Sourcing.Purchasing/United%20States%20and%20Canada%20Purchasing%20Cards%20Procedure.docx&action=default" target="_blank">United states & Canada Purchasing Cards Procedure</a></li>
\t \t \t \t \t \t \t \t </ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Links<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="http://cargill.sourcing.ariba.com" target="_blank">Ariba</a>
</li>
<li>
<a href="https://team.cargill.com/sites/P2PNA/_layouts/15/start.aspx#/Lists/Business_Stakeholder_Library/Tiles.aspx" target="_blank">P2P Business Stakeholder Library</a> </li>
<li>
<a href="https://cargill15--bmcservicedesk.na74.visual.force.com/apex/StdSelfServiceHome?sfdc.tabName=01ro0000000HBPc&tsid=02uo00000002kY1" target="_blank">RemedyForce</a>
</li>
</ul>
</li>
<li><a href="https://cargillonline.sharepoint.com/search/Pages/results.aspx?k=" target="_blank"><i class="fa fa-search" aria-hidden="true"></i></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
\t
\t <!-- Modale -->
\t <div id="myModal" class="modal fade">
\t <div class="modal-dialog">
\t <div class="modal-content">
\t <div class="modal-header">
\t <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
\t <h4 class="modal-title">Wait! Make Your Job Easier!</h4>
\t </div>
\t <div class="modal-body">
\t \t <p><b>Source through CSSP!</b></p>
\t <p>By sourcing through CSSP you can avoid having to navigate the entire complex supplier setup process and focus on your job while CSSP works for you in the background sourcing you a supplier and having them set-up in the appropriate ERP system for your use!</p>
\t <button class="btn btn-primary"><a href="Source.aspx" style="color:white">Lets go! <i class="fa fa-arrow-right" aria-hidden="true"></i></a></button>
\t <p> </p>
\t <div class="modal-footer">
\t \t <button type="button" class="btn btn-default" data-dismiss="modal">No, I do not want to make my job easier</button>
\t \t \t \t </div>
\t </div>
\t </div>
\t </div>
\t </div>
\t <!-- /.modale -->
\t
<!-- Page Content -->
\t
<div class="container">
\t <!-- Page Heading/Breadcrumbs -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Set-up a New Supplier
<small>First Steps</small>
</h1>
</div>
</div>
<!-- /.row -->
<!-- Content Row -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
\t <script>
\t $('div.panel-group#accordion .panel').click(function() {
\t \t $(this).addClass('clicked');
\t \t var count = $(this).parent().find('.panel').length, ctr = 0;
\t \t $(this).parent().find('.panel').each(function() {
\t \t \t if($(this).hasClass('clicked')) { ctr++; }
\t \t });
\t \t if(ctr === count) {
\t \t $('button#Continue').removeClass('hidden disabled');
\t \t }
\t })
\t </script>
\t \t <div class="row">
\t \t \t <div class="col-lg-12">
\t \t \t \t <p style="font-size:14pt">The following steps should be completed by the requester prior to submitting a request to set-up a new supplier. Failure to perform these steps may result in rejection of, or delays on your request.</p>
\t \t \t </div>
\t \t </div>
<!-- Content Row -->
<!-- Content Row -->
<div class="row">
<div class="col-lg-12">
<div class="panel-group" id="accordion">
<!-- panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<table>
<tbody>
<tr>
<td>
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa-stack-1x fa-inverse">1</i>
</span>
</td>
<td> </td>
<td style="font-size:16pt">Panel Title</td>
</tr>
</tbody>
</table>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<p>Panel Body</p>
</div>
</div>
</div>
<!-- /.panel -->
<!-- panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapsetwo">
<table>
<tbody>
<tr>
<td>
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa-stack-1x fa-inverse">2</i>
</span>
</td>
<td> </td>
<td style="font-size:16pt">Panel Title</td>
</tr>
</tbody>
</table>
</a>
</h4>
</div>
<div id="collapsetwo" class="panel-collapse collapse">
<div class="panel-body">
<p>Panel Body</p>
</div>
</div>
</div>
<!-- /.panel -->
<!-- panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapsethree">
<table>
<tbody>
<tr>
<td>
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa-stack-1x fa-inverse">3</i>
</span>
</td>
<td> </td>
<td style="font-size:16pt">Panel Title</td>
</tr>
</tbody>
</table>
</a>
</h4>
</div>
<div id="collapsethree" class="panel-collapse collapse">
<div class="panel-body">
<p>Panel Body</p>
</div>
</div>
</div>
<!-- /.panel -->
<!-- panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapsefour">
<table>
<tbody>
<tr>
<td>
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa-stack-1x fa-inverse">4</i>
</span>
</td>
<td> </td>
<td style="font-size:16pt">Panel Title</td>
</tr>
</tbody>
</table>
</a>
</h4>
</div>
<div id="collapsefour" class="panel-collapse collapse">
<div class="panel-body">
<p>Panel Body</p>
</div>
</div>
</div>
<!-- /.panel -->
<!-- panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapsefive">
<table>
<tbody>
<tr>
<td>
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa-stack-1x fa-inverse">5</i>
</span>
</td>
<td> </td>
<td style="font-size:16pt">Panel Title</td>
</tr>
</tbody>
</table>
</a>
</h4>
</div>
<div id="collapsefive" class="panel-collapse collapse">
<div class="panel-body">
<p>Panel Body</p>
</div>
</div>
</div>
<!-- /.panel -->
</div>
<!-- /.panel-group -->
</div>
<!-- /.col-lg-12 -->
</div> \t \t \t
<!--Continue button -->
<button id="Continue" class="btn btn-primary hidden disabled"><a href="AddSupplier-SubmitReq.aspx" style="color:white">Continue to Set-Up<i class="fa fa-arrow-right" aria-hidden="true"></i></a></button>
\t \t
\t \t <!--/.Continue button -->
<!--Check out FAQ's -->
<hr>
<div class="well">
<div class="row">
<div class="col-md-8">
<p>Questions? Check out our FAQ's</p>
</div>
<div class="col-md-4">
<a class="btn btn-lg btn-primary btn-block" href="Faqs.aspx">Go to FAQ's!</a>
</div>
</div>
</div>
<!--/.Check out FAQ's -->
</div>
<!-- /.row -->
<!-- Footer -->
<div style="padding-top:30px">
<div class="footer-position hidden-print ms-dialogHidden" style="padding-top: 0px;">
<div class="ava footer">
<div class="inner">
<div class="top">
<div class="thrive left">
<div class="inner"></div>
</div>
<div class="thrive right">
<div class="inner"></div>
</div>
</div>
<div class="bottom container-fluid clearfix">
<div class="row clearfix" data-bind="foreach: footerData">
<div class="col-xs-12 col-sm-3 col-md-2 pull-right text-right">
<div class="link">
<a data-bind="text: $data.Title, attr: { href: $data.Url}" href="https://sites.cargill.com/sites/Ethics_Compliance/CodeConduct/Pages/default.aspx">Code of Conduct</a>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-2 pull-right text-right">
<div class="link">
<a data-bind="text: $data.Title, attr: { href: $data.Url}" href="https://sites.cargill.com/sites/Ethics_Compliance/suppliercode/Pages/default.aspx">Supplier Code of Conduct</a>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-2 pull-right text-right">
<div class="link">
<a data-bind="text: $data.Title, attr: { href: $data.Url}" href="https://sites.cargill.com/sites/PolicyCenter/Pages/default.aspx">Policy Center</a>
</div>
</div>
</div>
<div class="copyright pull-right">© <span data-bind="text: year">2017</span> Cargill, Incorporated. All Rights Reserved</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.Footer -->
\t
</body>
</html>
アキュムレータを作成し、クリックごとにその値を増やし、コラボレーション可能なパネル値の数に達したらボタンを表示します。 –
または、クリック時に各セレクタ（id）にクラスを追加します。すべてのセレクタにクラスがある場合は、ボタンを表示します。 –
試しに使用したJSを貼り付けてください。 –