I am trying to disable a order button when the page loads and enable it when one checks the Terms and condition checkbox. I have it working where the order button is disabled when the page loads but on the click of checkbox the button doesnt get enabled. Here is my code. Can anyone help me identify the problem
<input type="checkbox" id="checkbox1" name="checkbox1" class="required" />Please read the Terms and Conditions
Jquery Code
var j$ = jQuery.noConflict();
j$(document).ready(function(){
alert("Hi");
if(j$('input[name="checkbox1"]').not(":checked"))
{
j$('input[name="Order"]').attr('disabled', 'disabled');
}
else
{
j$('input[name="Order"]').removeAttr('disabled');
}
j$('#checkbox1').change(function(){
if(j$('input[name="checkbox1"]').is(":checked")
{
j$('input[name="Order"]').attr('disabled', 'disabled');
}
else
{
j$('input[name="Order"]').removeAttr('disabled');
}
}
});
Thanks
Prady
The code you provided had some missing ( and {, here is an updated version with some changes to handle the checkbox state properly:
var j$ = jQuery.noConflict();
j$(document).ready(function() {
var checkbox1 = j$('#checkbox1');
var order = j$('input[name="Order"]');
var verifyChecked = function() {
if (checkbox1.is(":checked") === false) {
order.attr('disabled', 'disabled');
} else {
order.removeAttr('disabled');
}
};
verifyChecked();
checkbox1.change(verifyChecked);
});
Here is a jsfiddle with it working:
http://jsfiddle.net/7uRf6/4/
You have missed a closing parenthesis
if(j$('input[name="checkbox1"]').is(":checked")
should be
if(j$('input[name="checkbox1"]').is(":checked"))
Also you can use an id selector instead of this attribue selector.
And if you want to enable the button when the checkbox is checked you have to
if(!j$('input[name="checkbox1"]').is(":checked"))
in your change event,
if(j$('input[name="checkbox1"]').is(":checked")
it should be
if(j$('input[name="checkbox1"]').not(":checked")
I suggest you to create a function to check it.
var j$ = jQuery.noConflict();
j$(document).ready(function(){
ToggleButton();
j$('#checkbox1').change(ToggleButton);
});
function ToggleButton()
{
if(j$('input[name="checkbox1"]').not(":checked"))
{
j$('input[name="Order"]').attr('disabled', 'disabled');
}
else
{
j$('input[name="Order"]').removeAttr('disabled');
}
}
<script src="jquery.js"></script>
<script>
$(document).ready(function (){
$('#ch').click(
function (){
if($(this).is(':checked')){
$('#bt').attr('disabled','disabled');
}
else {
// remove
$('#bt').removeAttr('disabled');
}
}
)
})
</script>
<input type="button" value="button" id="bt"/>
<input type="checkbox" id="ch"/>
Related
I got a check box on the html page as:
<input type="checkbox" id="chk-info" name="chk-info" />
when I try to write an on change event and run, it's not getting fired. Instead if, I place an alert message before the function it is firing fine.
alert('blah');
var sth = function(){
function m(){
$("input[type='checkbox']").click(function (e) {
if ($(this).is(':checked')) {
alert("true");
} else {
alert("false");
}
});
}
return{ m:m};
};
I have tried using the id selector as well, but with not much luck.
Can anyone help me in pointing where the issue is?
EDIT: When I place the check box checked function outside the above function it works well with 'onchange' event attached on the <input> tag
Put the onclick event of the checkbox on page load.
$(document).ready(function () {
$("input[type='checkbox']").click(function (e) {
if ($(this).is(':checked')) {
alert("true");
} else {
alert("false");
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="checkbox" id="chk-info" name="chk-info" />
<label for="chk-info">label</label>
$(document).ready(function () {
$("input[type='checkbox']").click(function (e) {
if ($(this).is(':checked')) {
$(this).val("true");
} else {
$(this).val("false");
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="checkbox" id="chk-info" name="chk-info" />
<label for="chk-info">label</label>
As the title said, Is it possible to prevent page change from Href for a specific condition.
For example; if i have a div
<div href="#nextpage.html">Click me</div>
Is it possible to set a if statement to only allow a certain condition for this div to go to the nextpage??
For example
var canclick ="can_click";
if(canclick=="can_click"){
// Then allow the href to process to the next page.
} else {
// Have an alert up to say that the user can not proceed to the next page. And prevent the href to move to the next page.
}
Edit
$("#anchor").on('click', function(e) {
alert("clicked2");
})
Edit:
The only way the click event is
function clicked(){
alert(detected);
}
Edit:
I also just tried these. None of the alert gets called.
if($("#anchor").data('clicked'))
{
alert("again clicked");
}
$("#anchor").on('click', function(e) {
var $this = $(this);
if($this.data('clicked')) {
alert("clicked");
}
})
Here is a very simple example. The click function is not triggered if the initial condition is met (i = 0). Then, click the link again, and i != 1, so the normal <a> navigation is allowed to proceed.
i = 0;
$(document).on('click', 'a', function(e) {
if (i == 0) {
e.preventDefault();
alert('i = 0');
} else {
alert('i = ' + i);
}
i++;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Stackoverflow
If you are using jQuery you do something similar:
$(document).ready(function() {
$("a").click(function(e) {
if ($("#enable").is(":checked")) {
window.location = e.href;
} else {
e.preventDefault();
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input id="enable" name="check" type="radio" value="Enable" />Enable
<br>
<input id="disable" name="check" type="radio" value="Disable" />Disable
<br/>
Stackoverflow
</body>
Hi i have got a checkbox and when i click it and check the box a function runs, which works just how i want it to.. now i want to run a DIFFERENT function if it is checked off but it is just running the same function everytime.
<input type="checkbox" class="no-custom" onclick="CheckBox()">
function CheckBox() {
$("#emailMain").css({"display": "none"});
$("#emailSame").css({"display": "inline"});
var Mainemail = Customer().email['#text']();
Contact().email = Mainemail;
EmailHolder(Mainemail);
}
Any ideas in the best way to sort this?
Firstly, if you've included jQuery in your page you should use it to attach your events as its a better separation of concerns. You can then use the checked property of the element to determine which function to call:
<input type="checkbox" class="no-custom" />
$('.no-custom').change(function() {
if (this.checked) {
// do something...
}
else {
// do something else...
}
});
Add an ID to the checkbox:
<input type="checkbox" id="the-checkbox" class="no-custom" onclick="CheckBox()">
Then add an event listener for when it changes:
$(function() {
$('#the-checkbox').change(function() {
if($(this).is(':checked')) {
oneFunction();
}
else {
anotherFunction();
}
});
function oneFunction() {
}
function anotherFunction() {
}
});
You can easily check if the checkbox is checked using jQuery is.
<input type="checkbox" class="no-custom" onclick="CheckBox(this)">
function CheckBox(cb) {
if ($(cb).is(":checked")) {
alert("Checked");
CheckedFunction();
} else {
alert("Unchecked");
UncheckedFunction
}
}
So first off I did search and I found this Enable/Disable a dropdownbox in jquery which got me on the right track. I'm new to jquery so when seeing other code I can adapt it to fit and work for me.
So what i'm asking is how do you make it check to see if two check boxes condition are true?
<script>
$(document).ready(function() {
$("#box1").click(function() {
if ($(this).is(":checked")) {
$("#tech1").prop("disabled", false);
} else {
$("#tech1").prop("disabled", true);
}
});
});
</script>
I want it to be if box1 and box2 are checked enable this box? I understand you can do it with an if statement, but I'm not sure where exactly it goes. Thanks in advance.
Would this work:
$("#box1").click(function() {
if ($(this).is(":checked")) &&
$("#box2").click(function() {
if ($(this).is(":checked"))
I doesn't work and I assume thats because that above creates two functions and not the if statement that I need.
Include both in the event handler, and check if both are checked
$(document).ready(function() {
var boxes = $("#box1, #box2");
boxes.on('change', function() {
var disabled = boxes.filter(':checked').length === boxes.length;
$("#tech1").prop("disabled", disabled);
});
});
FIDDLE
Consider box1 & box2 checkboxes defined with a css class boxes as below:
<input type="checkbox" id="box1" class="boxes" />
<input type="checkbox" id="box2" class="boxes" />
Now you can use box class as jquery selector to do your task
<script>
$(document).ready(function() {
$(".boxes").click(function(){
if($(".boxes:checked").size() == $(".boxes").size()){
$("#tech1").prop("disabled", false);
}else{
$("#tech1").prop("disabled", true);
}
);
});
I am trying to check if a radio box is checked using JavaScript, but I can't seem to figure it out properly.
This is the HTML code:
<input type="radio" name="status" id="employed_yes" value="yes">
<input type="radio" name="status" id="employed_no" value="no">
I have tried using jQuery as follows:
$(document).ready(function() {
if($('#employed_yes').is(':checked')) {
// do something
}
});
Also, I tried using pure Javascript by getting the element and check its 'checked' attribute, but it didn't work.
I look forward to your insight!
Thank you!
Use onchange
$('input[type="radio"]').on('change',function(){
if($('#employed_yes').is(':checked')) {
alert("yes");
}
});
DEMO
Try to check using name of the radio buttons like
if($('input[name="status"]').val() != "") {
// do something
} else {
alert("Select an Status");
}
Your solution doesn't work because when the page loads the checkbox's default state is unchecked, which is when the jQuery code runs.
You need to listen for the change event on the checkbox like so:
$(document).ready(function() {
$("#employed_yes").change(function() {
if(this.checked) {
document.write("checked");
}
});
});
Demo: http://jsfiddle.net/7CduY/
Try this. This will alert Hi on document ready if the any radio button is checked. If you want to check on specific event then you can bind on any event to check same.
$(document).ready(function() {
if($('input[type=radio]').is(':checked')) {
alert("Hi");
}
});
if($('input:radio:checked').text("yes") {
// do something
}
Got the idea from the jQuery forum. http://forum.jquery.com/topic/how-to-check-whether-all-radio-buttons-have-been-been-selected
Dude, I think you Wanted, whether radio button is checked or not, this what i understand from your question
If so here it is
$(document).ready(function() {
$('input[type="radio"]').on('change',function(){
if($('[name=status]:checked').length) {
alert("checked");
}
});
});
FIDDLE DEMO
Pure JS:
<input type = "button" value = "What?" name = "wic" onclick = "whatischecked(this.name);" />
Event onClick:
function whatischecked(name) {
var
emp = document.getElementById("employed_yes").checked
nonemp = document.getElementById("employed_no").checked
if (emp) {
alert("Employed");
};
if (nonemp) {
alert("Non-Employed");
};
if ((emp == false) & (nonemp == false))
{
alert("nothing checked")
};
}