I am using jquery to disable a button in materialize css. According to documentation here, the way to disable button is simply by adding a class named 'disabled'.I think by simply add class 'disabled', the button will automatically disabled, but it is not. Here is my code:
html:
<button id='submit-btn' class="btn waves-effect waves-light submit red" type="button" name="action">
jquery:
$('#submit-btn').off().on('click', function(){
$('#submit-btn').addClass('disabled');
});
Try this
$('#submit-btn').removeClass("waves-effect waves-light submit").addClass('disabled');
Working Demo
$(document).ready(function() {
$('#submit-btn').on('click', function() {
$(this).removeClass("waves-effect waves-light submit").addClass('disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet" />
<button id='submit-btn' class="btn waves-effect waves-light submit red" type="button" name="action">
What about
$('#submit-btn').prop('disabled', true).addClass('disabled');
To disable the button using javascript.
eleme.classList.add('disabled');
To enable the button using javascript.
elem.classList.remove('disabled');
E.g:
let btn = document.getElementById('submit-btn');
btn.classList.add('disabled'); //This will disable the button
to disable button you can use
$("#submit-btn").attr("disabled", "true");
Create a variable which holds the button (say submitBtn), then add an event listener (say on DOMContentLoaded), then have the function disable the button with submitBtn.disabled = true;
Related
i am using a javscript to enable a button based on the changes in the form field in django python using bootstrap.below is the script
$("#employee_name, #employee_name2").on("keyup",function() {
$(".btn-action").prop("disabled",false);
if( ($("#employee_name").val()) == ($("#employee_name2").val())) {
$(".btn-action").prop("disabled",true);
}
});
also the below code in html to initially disable button
<button type="submit" class="btn btn-primary mt-3 btn-action" disabled>Save</button>
but the button stays disabled even after changing values in the field.any help would be appreciated
you need to add the below script
$(document).ready(function(){
$("#employee_name,#employee_name2").on("keyup",function(){
$(".btn-action2").prop("disabled",false);
if(($("#employee_name").val())==($("#employee_name2").val())){
$(".btn-action2").prop("disabled",true);
}
});
});
and below in the html
button type="submit" class="btn btn-success mt-3 btn-action2" disabled>Save</button>
I'm using following codes in a JSP page.This is my function to change button text by a button click in JavaScript.
How do I change the button to click?
<!-- btn1 -->
<button class="btn btn-primary btn-round" id="btnvisibility">
<i class="material-icons">visibility</i>
visibility
</button>
<!-- btn2 -->
<button class="btn btn-primary btn-round" id="btnvisibility">
<i class="material-icons">visibility_off</i>
visibility off
</button>
<script>
$(document).ready(function () {
$("#btnvisibility").on("click", function () {
$(".visibility").toggle("slow");
if ($(this).val() == "visibility")
$(this).val("visibility off");
else
$(this).val("visibility");
});
});
</script>
The html seems to be broken. Only use 1 button, never reuse an id attribute.
It is not completely evident what you want to achieve, but you probably want to add a visibility state to your button and visualize it with an embedded icon and show a matching text.
Importing the material design font, you would only need to change these texts. Your button also needs state to conveniently inform the handler what to do (this could also be derived from the current structure of the element but it would be unneccessarily complicated).
Example html
<!DOCTYPE html>
<!--
https://stackoverflow.com/questions/61189795/change-button-in-javascript-when-clicked
-->
<html>
<head>
<title>Adorning buttons with material icons</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function () {
$("#btnvisibility").on("click", function ( eve ) {
let b_isVisible = this.classList.contains("_btn-visible")
, s_buttontext
, s_text
;
if (b_isVisible) {
s_buttontext = 'visibility off';
s_text = 'visibility_off';
this.classList.remove("_btn-visible");
} else {
s_buttontext = 'visibility';
s_text = 'visibility';
this.classList.add("_btn-visible");
}
$("span", this).text(s_buttontext);
$("i", this).text(s_text);
$(this).val(s_buttontext);
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<button id="btnvisibility" class="btn btn-primary btn-round _btn-visible">
<i class="material-icons">visibility</i>
<span>visibility</span>
</button>
</body>
</html>
Explanation
The css class _btn-visible encodes the visibility state for the button.
The textual id for the icon to visualize the visibility state is the textual content of the i element inside the button. This text is changed upon a click.
The button label is remaining text inside the button. For easier referencing it is wrapped in a span element. This text is also changed upon a click.
I think this is what you're looking for.
HTML
<!-- btn1 -->
<button class="btn btn-primary btn-round" id="btnvisibility">
<i class="material-icons">visibility</i>
visibility
</button>
<button class="btn btn-primary btn-round" id="btnvisibility">
<i class="material-icons">visibility_off</i>
visibility off
</button>
JS
$(document).ready(function(){
$("#btnvisibility").click(function(){
$(this).text($(this).text() == 'visibility' ? 'visibility off' :
'visibility');
});
});
I would like to hide a materializeCSS button with javascript. Here is my code, but it is not hiding the button. It works in standard HTML but not when using materializeCSS.
<button id="btnViewJS" onclick="doStuff2()" class="waves-effect waves-light btn-small blue"><i class="material-icons left">assignment</i>View New Job Sheet</button>
<script>document.getElementById("btnViewJS").hidden=true; </script>
document.getElementById("btnViewJS").style.display='none'
You can set the display css style of the button to none like so instead:
<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>
<button id="btnViewJS" onclick="doStuff2(this)" class="waves-effect waves-light btn-small blue"><i class="material-icons left">assignment</i>View New Job Sheet</button>
<script>
function doStuff2(elem) {
elem.style.display = 'none';
}
</script>
Try this
document.getElementById("btnViewJS").style.visibility = "hidden";
Also this will work
document.getElementById("btnViewJS").style.display = "none";
The first one will hide the element, but keep adiacent elements fixed, the second one will render the page as the button is not present.
I would like to hide the div (which is "hide-div") as soon as the user cliks on the button when there is a navigation to the same page. Please help me on this. Thanks
<div id="hide-div">
<button type="button" title="test" class="button btn-small" onclick="setLocation('abc.com');"><span>'Add to Cart'</span></button>
</div>
Using Vanilla JavaScript. Although I recommend using event handler instead of inline JS, this is in view of your code.
Hide the element using style.display
You can redirect the page after hiding the button using window.location
function setLocation(loc) {
document.getElementById('hide-div').style.display = 'none';
window.location = loc;
}
<div id="hide-div">
<button type="button" title="test" class="button btn-small" onclick="setLocation('http://google.com')"><span>'Add to Cart'</span></button>
</div>
You can do this by simple jquery
<script>
jQuery(document).ready(function($) {
$(".button").click(function(){
$("div").fadeOut();
});
});
</script>
Using jQuery you can do this in your onclick:
$('#hide-div').hide()
http://api.jquery.com/hide/
Use jQuery to hide it:
$('#hide-div button').click(function(){
$(this).parent().hide();
});
I assume you have jQuery added to your page already. So, something like this maybe:
$('#hide-div .button').on('click', function() {
$('#hide-div').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hide-div">
<button type="button" title="test" class="button btn-small" onclick="setLocation('abc.com');"><span>'Add to Cart'</span></button>
</div>
Well, in my HTML page I have 6 buttons having values 1,2,3,4,5 and the 6th button has the value "disable".
All I want to do is disable a specific button by clicking the "disable" button using jQuery. For example if I press the 3rd button and then immediately click the disable button, button 3 should be disabled and if i click 4th button and then immediately click the disable button then 4th button should be disabled.
thanx in advance.
Buttons
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
<button class="btn">6</button>
<button class="dis">Disable</button>
And some jQuery
$('.btn').on('click', function() {
$(this).addClass('active').siblings('button').removeClass('active');
});
$('.dis').on('click', function() {
$('.btn.active').prop('disabled', true);
});
and a
FIDDLE
You can try this,
$('button').on('click',function(){
// your code;
$(this).prop('disabled',true);
});
HTML
<button class="mybutton">1</button>
<button class="mybutton">2</button>
<button class="mybutton">3</button>
<button class="mybutton">4</button>
<button class="mybutton">5</button>
<button class="disable">Disable</button>
SCRIPT
$(function(){
$('.mybutton').on('click',function(){
$(this).addClass('disableMe');
});
$('.disable').on('click',function(){
$('.disableMe').prop('disabled',true);
});
});
Working Fiddle