Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

oncheck listener for checkbox in javascript

I have code like this at the bottom of my form.

<p>
  <input type="checkbox" id="agreed">
  I agree to keep my Username and Password confidential and uphold 
  the integrity of this pharmacy
</p>
<input type="submit" id="submit" disabled class="formbutton button-primary" value="Go">

I want this a listener in JavaScript to be able to enable the submit button. I know it might be wrong or something but my JavaScript looks sort of like this

function track() {
    if ( document.getElementById("agreed").checked==true ) {
        document.getElementById("submit").removeAttribute("disabled");
    } else {
        document.getElementById("agreed").checked==false
    }
};
like image 685
Gottfried Tetteh Avatar asked Jul 29 '15 16:07

Gottfried Tetteh


People also ask

How to check if a checkbox is checked in JavaScript?

JavaScript Checkbox 1 Checking if a checkbox is checked. First, select the checkbox using the selecting DOM methods such as getElementById () or querySelector (). 2 Getting values of multiple selected checkboxes. To accomplish this, you need to add two more HTML attributes to each checkbox: name and value . 3 Check / Uncheck all checkboxes. ...

How to select the selected checkboxes using JavaScript queryselectorall?

To select the selected checkboxes, you use the querySelector () method: const checkboxes = document .querySelectorAll ( 'input [name="color"]:checked' ); Code language: JavaScript (javascript) And gather the value of each checkbox: let colors = []; checkboxes.forEach ( (checkbox) => { colors.push (checkbox.value); });

How to add an eventlistener to a checkbox using JavaScript?

and you want to add an EventListener to this checkbox using javascript, in your associated js file, you can do as follows: checkbox = document.getElementById ('conducted'); checkbox.addEventListener ('change', e => { if (e.target.checked) { //do something } });

How do I get the state of a checkbox in HTML?

To get the state of a checkbox, whether checked or unchecked, you follow these steps: First, select the checkbox using the selecting DOM methods such as getElementById () or querySelector (). Then, access the checked property of the checkbox element.


2 Answers

You can do this for the input:

<input type='checkbox' onchange='handleChange(this);'>Checkbox 

And this for enabling the button:

function handleChange(checkbox) {     if(checkbox.checked == true){         document.getElementById("submit").removeAttribute("disabled");     }else{         document.getElementById("submit").setAttribute("disabled", "disabled");    } } 
like image 149
Lvkz Avatar answered Sep 23 '22 01:09

Lvkz


Try Below for your requirement using jQuery.

$('#checky').click(function(){
     
    if($(this).attr('checked') == false){
         $('#postme').attr("disabled","disabled");   
    }
    else {
        $('#postme').removeAttr('disabled');
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<input type="checkbox" checked="checked" id="checky"><a href="#">I agree to keep my Username and Password confidential and uphold 
  the integrity of this pharmacy</a>
<br>
<input type="submit" id="postme" value="submit">

Using JavaScript, Please refer This

like image 26
Janty Avatar answered Sep 24 '22 01:09

Janty