如何通过单击按钮启用选项卡？

Question

$(document).ready(function() {
  $('.tabs').tabs();
  $("#btnContinue").click(function() {
    $("#test2").attr("disabled", "false");
    $("#test3").attr("disabled", "false");
    $("#test4").attr("disabled", "false");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="col s12">
  <ul class="tabs">
    <li class="tab col s3"><a href="#test1">Test 1</a></li>
    <li class="tab col s3 disabled"><a href="#test2">Test 2</a></li>
    <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
    <li class="tab col s3 disabled"><a href="#test4">Test 4</a></li>
  </ul>
</div>

<div id="test2" class="col s12">Test 2</div>
<div id="test3" class="col s12">Test 3</div>
<div id="test4" class="col s12">Test 4</div>

<div class="modal-content" id="test1">
  <h4>Register</h4>
  <p>A bunch of text</p>
  <form id="signup-form">
    <div class="input-field">
      <input type="email" id="signup-email" required />
      <label for="signup-email">Email address</label>
    </div>
    <div class="input-field">
      <input type="password" id="signup-password" required />
      <label for="signup-password">Choose password</label>
    </div>
    <button class="btn yellow darken-2 z-depth-0" id="btnContinue">Continue</button>
  </form>
</div>

我的想法是我有 4 个选项卡，其中 3 个被禁用（我使用了 materialize css）。如果用户输入他的电子邮件和他的密码然后按下按钮，所有选项卡都应该启用（从禁用更改为启用）。问题是我不知道如何实现这个（我的代码不工作）。感谢您的帮助！

Answer 1

首先，您应该删除 class“disabled”而不是 attribute，同时从选项卡中删除它而不是 div 内容，

应该是这样的：

$(".tabs .tab").removeClass("disabled");

另外我建议在提交表单后删除它，而不是点击按钮

$("#signup-form").on("submit", function(e){
    e.preventDefault();
    $(".tabs .tab").removeClass("disabled");

});

下面是一个工作片段：

$(document).ready(function() {
  $('.tabs').tabs();
  
  $("#signup-form").on("submit", function(e){
    e.preventDefault();
    $(".tabs .tab").removeClass("disabled");
    
    // diable only by id using a href 
    //$(".tabs .tab").has('a[href="#test2"]').removeClass("disabled")
    
    
    // or your can get only get next tab
    // $(".tabs .tab").has('a.active').next().removeClass("disabled");
  })


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="col s12">
  <ul class="tabs">
    <li class="tab col s3"><a href="#test1">Test 1</a></li>
    <li class="tab col s3 disabled"><a href="#test2">Test 2</a></li>
    <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
    <li class="tab col s3 disabled"><a href="#test4">Test 4</a></li>
  </ul>
</div>

<div id="test2" class="col s12">Test 2</div>
<div id="test3" class="col s12">Test 3</div>
<div id="test4" class="col s12">Test 4</div>

<div class="modal-content" id="test1">
  <h4>Register</h4>
  <p>A bunch of text</p>
  <form id="signup-form">
    <div class="input-field">
      <input type="email" id="signup-email" required />
      <label for="signup-email">Email address</label>
    </div>
    <div class="input-field">
      <input type="password" id="signup-password" required />
      <label for="signup-password">Choose password</label>
    </div>

    <button class="btn yellow darken-2 z-depth-0" id="btnContinue">Continue</button>
  </form>
</div>
<script>
</script>

Answer 2

$(document).ready(function() {
  $('.tabs').tabs();
  $("#btnContinue").click(function() {
    $(".tab").removeClass("disabled");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="col s12">
  <ul class="tabs">
    <li class="tab col s3"><a href="#test1">Test 1</a></li>
    <li class="tab col s3 disabled"><a href="#test2">Test 2</a></li>
    <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
    <li class="tab col s3 disabled"><a href="#test4">Test 4</a></li>
  </ul>
</div>

<div id="test2" class="col s12">Test 2</div>
<div id="test3" class="col s12">Test 3</div>
<div id="test4" class="col s12">Test 4</div>

<div class="modal-content" id="test1">
  <h4>Register</h4>
  <p>A bunch of text</p>
  <form id="signup-form">
    <div class="input-field">
      <input type="email" id="signup-email" required />
      <label for="signup-email">Email address</label>
    </div>
    <div class="input-field">
      <input type="password" id="signup-password" required />
      <label for="signup-password">Choose password</label>
    </div>
    <button class="btn yellow darken-2 z-depth-0" id="btnContinue" type="button">Continue</button>
  </form>
</div>

如何通过单击按钮启用选项卡？

How can I enable tabs by clicking on the button?

html

css

jquery

tabs

materialize