$(document).ready(function() {
$('.tabs').tabs();
$("#btnContinue").click(function() {
$("#test2").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, the tab 2 should be enabled(only tab2).
in your code, disabled is not attribute/property but class, on button click add class disabled to all tab but remove from the second tab.
$(document).ready(function() {
$('.tabs').tabs();
$("#btnContinue").on('click', function(e) {
e.preventDefault(); // <== disable form submit
$('.tab').addClass('disabled');
var secondTab = $('.tab').eq(1)
secondTab.removeClass('disabled', false)
secondTab.find('a')[0].click(); // switch tab
});
});<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>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments