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

debugcn 发表于 Dev

埃利亚·法迪

$(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个已禁用（我使用了物化CSS）。如果用户输入电子邮件和密码，然后按按钮，则应启用所有选项卡（从禁用更改为启用）。问题是我不知道如何实现这一点（我的代码无法正常工作）。谢谢你的帮助！

弹簧

首先，您应该删除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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。