I want to use this checkbox function that I found here however in my existing page I use bootstrap button that have the following form.
<p style="color: #FFFFFF">I have read and agree to the terms and conditions
<input type="checkbox" id="termsChkbx " onclick="change_button(this,'sub1')"/>
</p>
<a class="btn btn-light btn-xl disabled" href="randomlink.com">Download Now</a>
What are the modifications I should make in the function or the button to turn it to enabled, after the user has clicked on the checkbox?
PS: I include the referenced function below.
<script type = "text/javascript">
function change_button(checkbx,button_id) {
var btn = document.getElementById(button_id);
if (checkbx.checked == true) {
btn.disabled = "";
} else {
btn.disabled = "disabled";
}
}
</script>
Try sing a button like below. Wrap your <a> tag inside a <button> tag. Anchor tag does not have disabled property, but button have.
In order to disable the anchor tag, you have to clear the href manually.
function change_button(checkbx,button_id) {
var btn = document.getElementById(button_id);
if (checkbx.checked == true) {
btn.disabled = false;
btn.children[0].href = "randomlink.com";
} else {
btn.disabled = true;
btn.children[0].href = "javascript: void(0)";
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<p style="color: #FFFFFF">I have read and agree to the terms and conditions
<input type="checkbox" id="termsChkbx " onclick="change_button(this,'sub1')"/>
</p>
<button class="btn btn-light btn-xl" disabled id="sub1">
<a>Download Now</a>
</button>
Here is a runnable example based on your code. I've adapted your example with the following things:
The <a> tag must be a <button> in order to disable it. The anchor tag does not have a disabled attribute.
The button must be initially disabled (therefore the added disabled attribute).
You are passing an ID as an argument to the function. This ID must be equal to the button's ID. So, I added it as an attribute to the button.
I've removed the disabled class from the button, as it is not necessary, when there is an attribute disabled.
The button must submit a form, so you can either wrap it in a <form> or use a JavaScript click listener on the button. I've used the 2nd option in the solution below.
function change_button(checkbx,button_id) {
var btn = document.getElementById(button_id);
if (checkbx.checked == true) {
btn.disabled = "";
} else {
btn.disabled = "disabled";
}
}
function submit() {
window.location.href = 'https://www.google.com';
}
body {
background: #555 !important;
margin: 0;
padding: 20px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<p style="color: #FFFFFF">I have read and agree to the terms and conditions
<input type="checkbox" id="termsChkbx" onclick="change_button(this, 'sub1')"/>
</p>
<button disabled id="sub1" class="btn btn-light btn-xl" onclick="submit()">Download Now</button>
Just use checked to see if the checkbox is ticked or not and then add an id for your button as well so you can use the classList() JavaScript property to toggle the disable class name based on the status of the checkbox.
Also, avoid using inline scripts like onclick and use an event listener in your JavaScript itself like this:
let chkBox = document.getElementById("termsChkbx");
let btn = document.getElementById("someBtn");
chkBox.addEventListener("click", function() {
if(this.checked == true) {
btn.classList.remove("disabled");
} else {
btn.classList.add("disabled");
}
});
body {background-color: #000 !important;}
<!-- Botstrap CSS File --><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/><!-- Botstrap CSS File -->
<p>I have read and agree to the terms and conditions
<input type="checkbox" id="termsChkbx"/>
</p>
<a id ="someBtn" class="btn btn-light btn-xl disabled" href="randomlink.com">Download Now</a>
JSFiddle with the above code: https://jsfiddle.net/AndrewL64/k3po4zfa/1/
To stop clicking, in addition to adding the disabled class, add this to your css:
pointer-events: none;
It won't stop people from tabbing to the button and hitting space or enter, but it will stop them from clicking
Related
I have a fieldset tag that I am setting the property disabled on if a particular URL variable exist:
<fieldset class="fieldsetGeneralSettings" <cfif #url.read_only# eq 'yes'>disabled="disabled"</cfif> >
</fieldset>
All elements of the fieldset are disabled when I set that property to disabled, however I have an HTML button inside that fieldset that I want to force to be enabled. I tried to force it using the following javascript but it doesn't seem to do anything.
<button id="followup_detail_button" class="TicketButton" onclick="followupButtonDetailsClick(event);"><i class="far fa-calendar-alt"> </i> <font color="red">Follow-up Request</font></button>
<button id="followup_button" class="TicketButton" onclick="followupButtonClick(event);"><i class="far fa-calendar-alt"> </i> Follow-up Request</button>
<script>
$(document).ready(function () {
console.log("Trying to enable the button");
$("##followup_detail_button").removeAttr('disabled');
$("##followup_button").removeAttr('disabled');
})
</script>
What am I doing wrong?
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'm working on a project where a button needs to be disabled until a hyperlink is clicked and a checkbox is checked. I currently have the checkbox part down using jQuery:
$('#tc-checkbox').change(function(){
if($(this).is(":checked")) {
$('#tc-btn').removeClass('tc-disable');
} else {
$('#tc-btn').addClass('tc-disable');
}
});
But I also need to set it up so the class of tc-disable is still on the button until an anchor tag is clicked as well. I've never really done this before where a link needs to be clicked before removing a class and couldn't find what I was looking for as I was Googling for an answer.
Hope the code below helps. I also added console out put so you can track the value. Another option is use custom attribute on link element instead of javascript variable to track if the link is clicked.
var enableLinkClicked = false;
$('#tc-link').click(function() {
enableLinkClicked = true;
console.log("link clicked\ncheckbox value: " + $($('#tc-checkbox')).is(":checked"));
console.log("link clicked: " + enableLinkClicked);
if ($('#tc-checkbox').is(":checked")) {
$('#tc-btn').removeClass('tc-disable');
}
});
$('#tc-checkbox').change(function() {
console.log("checkbox clicked\ncheckbox value: " + $(this).is(":checked"));
console.log("link clicked: " + enableLinkClicked);
if ($(this).is(":checked") && enableLinkClicked) {
$('#tc-btn').removeClass('tc-disable');
} else {
$('#tc-btn').addClass('tc-disable');
}
});
#tc-btn.tc-disable {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="tc-btn">My Button</button>
<br/>
<a id="tc-link" href="javascript:void(0);">Link to enable button</a>
<br/>
<input type="checkbox" id="tc-checkbox" />
If the page is refreshing or taking you to a different page when you click the hyperlink, you will want to look into sessionStorage. When the hyperlink is clicked you will want to set a sessionStorage variable and when the page loads you want to check that variable to see if it is populated. If the variable is populated, enable the button.
Set the variable.
sessionStorage.setItem('key', 'value');
Get the variable
var data = sessionStorage.getItem('key');
If you need to re-disable the button you can clear the session storage and reapply the disabled class.
sessionStorage.clear();
You can learn more about session storage here.
If the page does not refresh you could just set an attr on the link when it is clicked like so.
$('#tc-link').on('click', function() {
$(this).attr('clicked', 'true');
});
Then when the checkbox is checked you can check this in your function.
$('#tc-checkbox').change(function(){
if($(this).is(":checked") && $('#tc-link').hasAttr('clicked')) {
$('#tc-btn').removeClass('tc-disable');
} else {
$('#tc-btn').addClass('tc-disable');
}
});
These are just some solutions I could think of off the top of my head. Hope this helps.
Maybe this is better for you. First you make an .on('click' event listener on the anchor element, then, if the checkbox is checked enable the button. I added the else statement to disable the button if a user clicks the link and the checkbox is not set for an example. In this example you don't need the classes.
But if you needed to keep the the classes then you would replace the $('#tc-btn').prop('disabled', false); with $('#tc-btn').addClass() or .removeClass()
$( '#theLink' ).on( 'click', function(e)
{
e.preventDefault();
if($('#tc-checkbox').is(':checked'))
{
$('#tc-btn').prop('disabled', false);
$('#tc-btn').val('Currently enabled');
}
else
{
$('#tc-btn').val('Currently disabled');
$('#tc-btn').prop('disabled', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="tc-checkbox" />
This link will enable the button
<input type="button" id="tc-btn" value="Currently disabled" disabled="disabled"/>
Here a much more simple solution and it handles the state of the button if they uncheck the "I Accept" checkbox. It is pretty easy to implement. I just used Bootstrap to pretty up the example.
//Handles the anchor click
$("#anchor").click(() => {
$("#anchor").addClass("visited");
$("#acceptBtn").prop("disabled", buttonState());
});
//Handles the checkbox check
$("#checkBx").on("change", () => {
$("#acceptBtn").prop("disabled", buttonState());
});
//Function that checks the state and decides if the button should be enabled.
buttonState = () => {
let anchorClicked = $("#anchor").hasClass("visited");
let checkboxChecked = $("#checkBx").prop("checked") === true;
return !(anchorClicked && checkboxChecked);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
View Terms
</div>
</div>
<div class="row">
<div class="col-md-12">
<label class="form-check-label">
<input class="form-check-input" id="checkBx" type="checkbox" value="">
I accept the terms
</label>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button id="acceptBtn" class="btn btn-success" disabled="disabled">
Ok
</button>
</div>
</div>
</div>
A one-liner solution using Javascript could be:
<input type="submit" id="test" name="test" required disabled="disabled">
<label for="test">I clicked the <a target="_blank" href="https://stackoverflow.com" onclick="document.getElementById('test').disabled=false">link</a>.</label>
Change the type "submit" to "button" or "checkbox" accordingly to your needs.
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;
I want to disable link button after clicking of it & other enable. toggle enable/ disable between both link buttons using javascript
<a id="a1" href="page1.aspx">One</a><a id="a2" href="page2.aspx">Two</a>
Simple, just add listeners to the onclick events on both links, that disable the link in question and enable the other one.
Something like
document.getElementById('a1').onclick = function() {
document.getElementById('a1').disabled = true;
document.getElementById('a2').disabled = false;
};
document.getElementById('a2').onclick = function() {
document.getElementById('a2').disabled = true;
document.getElementById('a1').disabled = false;
};
Of course if you're going to be extending this to multiple buttons then you could easily abstract the above out to registration methods, looping over arrays of buttons etc. (possibly those that implement a particular class rather than explicitly specifying the array).
The simplest way is to hide the link rather than to make it disabled.
You can use this code to hide the link after click on it.
Its tested code & it worked perfect for me. :-)
<script type="text/javascript">
onclick = function() {
var chk= document.getElementById('myElementId');
chk.style.display="none";
};
</script>
To disable a LINK rather than a BUTTON, the only thing you can do apart from hiding it is to set it not to go anywhere.
onclick="this.href='javascript: void(0)';"
Your question can have any one of the following 3 possible scenario. Choose whichever suites your problem.
Case1) A catch in your question is that since they are links pointing to page1.aspx and page2.aspx respectively once you click on a link a new page loads in the browser. So the effect you want to achieve doesn't really matter.
Case 2) If, you have both the links 'One' and 'Two' on each of aspx pages then you can as well hardcode the disabling of the link pointing to itself. (Or as well not have the link at all).
Case 3) If you have a frame to display the links 'One', 'Two' and you have a another frame to load content of both links then your question has a meaning disabling the other link. Here is the code for the same.
<html>
<a id="a1" href="javascript:void(0)" onclick="toggle(objA1,objA2,'page1.aspx')">One</a>
<a id="a2" href="javascript:void(0)" onclick="toggle(objA2,objA1,'page2.aspx')">Two</a>
<br><iframe id="ifrm" src=""></iframe>
<script>
var objA1 = document.getElementById('a1');
var objA2 = document.getElementById('a2');
// d=element to disable, e=element to enable
function toggle(d,e,link)
{
//if already disabled do nothing(don't follow url)
if(d.disabled) return;
//enable/disable
d.disabled = true;
d.style.cursor = 'default';
e.disabled = false;
e.style.cursor = 'hand';
//follow link
ifrm.src = link;
}
</script>
</html>
You can access and set the "disabled" attribute like this:
if(somebutton.disabled == true){
somebutton.disabled = false;
}
I recommend using a JavaScript framework like jQuery.
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
.submit{
padding:8px;
border:1px solid blue;
}
</style>
</head>
<body>
<h1>Disabled submit form button after clicked with jQuery</h1>
<form action="#">
<p>
I'm a form ~
</p>
<input type="submit" value="Submit"></input>
<button>Enable Submit Button</button>
</form>
<script type="text/javascript">
$('input:submit').click(function(){
$('p').text("Form submiting.....").addClass('submit');
$('input:submit').attr("disabled", true);
});
$('button').click(function(){
$('p').text("I'm a form ~").removeClass('submit');
$('input:submit').attr("disabled", false);
});
</script>
</body>
</html>
<script type="text/javascript">
function validateForm(formObj) {
if (formObj.username.value=='') {
alert('Please enter a username');
return false;
}
formObj.submitButton.disabled = true;
formObj.submitButton.value = 'Please Wait...';
return true;
}
</script>
<form name="frmTest" action="" method="post" onsubmit="return validateForm(this);">
Username: <input type="text" name="username" value="" /><br />
<input type="submit" name="submitButton" value="Submit" />
</form>