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

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>

My idea is that I have 4 tabs and 3 of them are disabled(I used materialize css). If the user enter his Email and his Password and then presses the button, all tabs should be enabled(change from disabled to enabled). The problem is that I have no Idea how to implement this(my code is not working). Thanks for any help!

Answer 1

First you should remove the class " disabled " not the attribute , also remove it from tabs not the div content,

should be somthing like:

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

Also I suggest to remove it after form submit, not the button click

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

});

Here below a working snippet:

 $(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>