JQuery .prop function not working to uncheck box - javascript

I tried many of the ideas I found here to uncheck a checkbox when a different checkbox is checked, but none are working ...
Right I now I have :
$("#chkBox1").click(function () {
if ($(this).is(":checked")) {
$('#chkBox2').prop('checked', false); }
});
..but no results, chkBox2 remains checked
here is a checkbox in HTML:
<input type="checkbox" name="art" id="chkBox1" data-mini="true" data-theme="c" />
one possible difference in my code is that the checkboxes are only added to the page when a button is clicked, using href...the checkboxes are in the HTML (not created in Javascript)..but are not visible until a button is clicked..may this be part of the problem? Or am I missing something else? Also, I am using JQuery Mobile.

You need to refresh it after changing its' .prop, using .checkboxradio('refresh').
Demo
// Check #chkBox2 by default
$('#chkBox2').prop('checked', true).checkboxradio('refresh')
// Uncheck #chkBox2 when #chkBox1 is checked
$('#chkBox1').on('click', function () {
if ($(this).is(':checked')) {
$('#chkBox2').prop('checked', false).checkboxradio('refresh');
}
});
jQuery Mobile API reference

sorry, I should have kept reading!
this seems to do the trick:
$('#chkBox1').checkboxradio('refresh');
..but I am not exactly sure why, is this something unique to JQuery Mobile?

Html
<input type="checkbox" name="art" id="chkBox1" data-mini="true" data-theme="c" />
<input type="checkbox" name="art2" id="chkBox2" data-mini="true" data-theme="c" checked="checked" />
jQuery:
(function ($) {
$(document).ready(function () {
$("#chkBox1").click(function () {
if ($(this).is(":checked")) {
$('#chkBox2').prop('checked', false);
}
});
});
})(jQuery);
Working example here http://jsfiddle.net/SwmN6/75/

You are checking this, and changing chkBox2:
if ($(this).is(":checked")) {
$('#chkBox2').prop('checked', false); }
Try this instead:
if ($('#chkBox2').is(":checked")) {
$('#chkBox2').prop('checked', false); }
Or simply:
$('#chkBox2').prop('checked', false);

Related

jQuery to disable radio button not working [duplicate]

I'm trying to disable these radio buttons when a the loadActive link is clicked but for some reason it only disables the first in the order and then skips the rest.
<form id="chatTickets" method="post" action="/admin/index.cfm/">
<input id="ticketID1" type="radio" checked="checked" value="myvalue1" name="ticketID"/>
<input id="ticketID2" type="radio" checked="checked" value="myvalue2" name="ticketID"/>
</form>
Load Active
And Here is the jquery i'm using:
jQuery("#loadActive").click(function() {
//I have other code in here that runs before this function call
writeData();
});
function writeData() {
jQuery("input[name='ticketID']").each(function(i) {
jQuery(this).attr('disabled', 'disabled');
});
}
Remove your "each" and just use:
$('input[name=ticketID]').attr("disabled",true);
That simple. It works
I've refactored your code a bit, this should work:
jQuery("#loadActive").click(writeData);
function writeData() {
jQuery("#chatTickets input:radio").attr('disabled',true);
}
If there are more than two radio buttons on your form, you'll have to modify the selector, for example, you can use the starts with attribute filter to pick out the radios whose ID starts with ticketID:
function writeData() {
jQuery("#chatTickets input[id^=ticketID]:radio").attr('disabled',true);
}
just use jQuery prop
$(".radio-button").prop("disabled", false);
$(".radio-button").prop("disabled", true); // disable
First, the valid syntax is
jQuery("input[name=ticketID]")
second, have you tried:
jQuery(":radio")
instead?
third,
why not assign a class to all the radio buttons, and select them by class?
I just built a sandbox environment with your code and it worked for me. Here is what I used:
<html>
<head>
<title>test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<form id="chatTickets" method="post" action="/admin/index.cfm/">
<input id="ticketID1" type="radio" checked="checked" value="myvalue1" name="ticketID"/>
<input id="ticketID2" type="radio" checked="checked" value="myvalue2" name="ticketID"/>
</form>
Load Active
<script>
jQuery("#loadActive").click(function() {
//I have other code in here that runs before this function call
writeData();
});
function writeData() {
jQuery("input[name='ticketID']").each(function(i) {
jQuery(this).attr('disabled', 'disabled');
});
}
</script>
</body>
</html>
I tested in FF3.5, moving to IE8 now. And it works fine in IE8 too. What browser are you using?
code:
function writeData() {
jQuery("#chatTickets input:radio[id^=ticketID]:first").attr('disabled', true);
return false;
}
See also: Selector/radio, Selector/attributeStartsWith, Selector/first
You can try this code.
var radioBtn = $('<input type="radio" name="ticketID1" value="myvalue1">');
if('some condition'){
$(radioBtn).attr('disabled', true); // Disable the radio button.
$('.span_class').css('opacity', '.2'); // Set opacity to .2 to mute the text in front of the radio button.
}else{
$(radioBtn).attr('disabled', false);
$('.span_class').css('opacity', '1');
}

adding click event to class with jQuery

I found found several question's answers similar to this, I tried some of them, but no luck. May my scenario is different, I want to make other checkbox disable when anyone of them is clicked. if one is clicked second go disabled.
Edit:
I have two checkboxes i.e; chk1 and chk2. if chk1 is checked chk2 become disable, if chk2 is checked chk1 become disable
HTML
<tr class="cart-item-row">
<td class="remove-from-cart">
<label class="td-title">Remove:</label>
<input type="checkbox" name="removefromcart" value="4392" tabindex="15" class="class2">
</td>
<td class="add-to-cart">
<label class="td-title">Buy Now:</label>
<input type="checkbox" name="addtocart" value="4392" tabindex="16" class="class2">
</td>
</tr>
JS
<script>
$(function () { // I am also adding class to checkbox through JS
$('.cart-item-row > td > input[type="checkbox"]').addClass("class2");
});
</script>
<script>
//$('input[class^="class"]').click(function () {
//$('.class2').unbind().click(function () {
$('.class2').click(function () {
var $this = $(this);
if ($this.is(".class2")) {
if ($this.is(":checked")) {
$(".class2").not($this).prop({ disabled: true, checked: false });
} else {
$(".class2").prop("disabled", false);
}
}
});
</script>
You have missing , You can place your jquery within
$(document).ready(function(){
}
You have to put your click event in document ready state $(function () { });
You can see here working Example

JQuery loop through multiple input checkboxes

I am tasked with having one checkbox within multiple divs. When the checkbox is checked, I want to hide the div. I want to use Jquery to implement this functionality. I feel I am close, but missing something essential.
Here is my code and any help would be greatly appreciated.
Thanks,
Roka
<div id='legGroup1' class="elementGroup">
<input type="checkbox" class="delCheck" id="1" />Delete</label>
</div>
<div id='legGroup2' class="elementGroup">
<input type="checkbox" class="delCheck" id="2" />Delete</label>
</div>
<button type='button' id='removeLeg'></button>
$("#removeLeg").click(function (e) {
$('.delCheck').each(function () {
if (this.id.prop('checked')) {
$("#legGroup" + this.id).hide();
}
});
});
You can simply find the parent element:
$("#removeLeg").click(function() {
$('.delCheck:checked').each(function() {
// ^^^^^^^^ -> look it filters only checked elements
$(this).parent().hide();
});
});
Or, more accurate, using closest method:
$(this).closest('.elementGroup').hide();
Since your using an each function, base it off the value of the items in the array the function returns.
$("#removeLeg").click(function (e) {
$('.delCheck').each(function (key, value) {
if ($(value).is(':checked')) {
$(value).parent().hide();
}
});
});
First of all, you're missing an open label tag in your HTML.
<label><input type="checkbox" class="delCheck" id="1" />Delete</label>
As for the click event, you can try this, to loop through each checked checkbox and hide their closest div parent.
$(document).ready(function(){
$('#removeLeg').on('click', function(){
$('.delCheck:checked').each(function(){
$(this).parents('div').hide();
});
});
});
Here's a demo: https://jsfiddle.net/nx9e1yp5/1/

jQuery checking checkboxes does not work

I'm trying to implement a "Select All" checkbox on an HTML form using JQuery 1.9.1. As far as I can tell, it should be as simple as using .prop to check or uncheck a checkbox, but nothing I try seems to work.
Please see below for what I have tried, I've commented out some failed attempts out and I cannot get this to work for even one checkbox. What is the correct way to do this? Am I missing something, possibly in the HTML?
HTML
<input type="checkbox" id="cb_select_all" name="cb_select_all" value="t" />
<label for="cb_select_all"><b>Select All</b>
</label>
<br />
<input type="checkbox" name="cb1" id="cb1" class="cb_all" value="t" />
<label for="cb1">1 test</label>
<br />
<input type="checkbox" name="cb2" id="cb2" class="cb_all" value="t" />
<label for="cb2">2 test</label>
Javascript
$(document).ready(function () {
$("#cb_select_all").change(cb_select_all_onchange);
}); //end $(document).ready
function cb_select_all_onchange() {
if ($("#cb_select_all").checked) {
//$("#cb1").prop("checked", true);
//$(".cb_all").each(function(){ this.checked = true; });
//document.getElementById("cb1").checked = true;
$(".cb_all").prop("checked", true);
} else {
$("#cb1").prop("checked", false);
}
}
http://jsfiddle.net/mLnb5qed/5/
Thanks,
jdt
Change your if to this
if ($("#cb_select_all")[0].checked) { }
( or ) if ($("#cb_select_all").is(":checked")) { }
The problem is the first one is a property of native element and not jQuery object. Accessing it by an index gives you the ability to use that property. The second way is the jQuery way.
Use
$("#cb_select_all").is(':checked');
This worked for me:
$(document).ready(function () {
$("#cb_select_all").change(function () {
if ($("#cb_select_all").prop("checked") == true) {
$('.cb_all').prop('checked', true);
}
else {
$('.cb_all').prop('checked', false);
}
});
});
What happens:
Check if the "cb_select_all" checkbox changes state
if the "checked" state is set to true
check all "cb_all" checkboxes
else
uncheck all "cb_all" checkboxes

Fairly easy JQuery Input Selection location problem

I am having a problem with getting my JQuery javascript code to apply to the select box elements that it is supposed to. What's happening is that the select boxes are not following the actions that are specified in the javascript code. They are simply staying disabled and checked (see code below) instead of changing based on the first checkbox's selection.
I believe it is a problem regarding how I specify the location of the select boxes in the javascript code, but I don't know how to go about fixing it. Then again, I could be wrong about that too.
If you have any insight on this or can correct the code, please do! Cheers.
HTML:
<div class="medium_box">
<form name="searchform" class="FECKsearch" method="get" onSubmit="return dosearch();">
<input name="s" id="searchBox" class="input" type="text" value="" onfocus="myFocusHandler(this);" onblur="myBlurHandler(this);" size="18" maxlength="50">
<input type="submit" name="searchsubmit" class="button" value="Go" />
<span class="searcher">International: <input type="checkbox" id="International" checked="yes"></input></span>
<span class="searcher1">Americas: <input type="checkbox" id="Americas" disabled checked="yes"></input></span>
<span class="searcher1">Europe: <input type="checkbox" id="Europe" disabled checked="yes"></input></span>
Asia: <input type="checkbox" id="Asia" disabled checked="yes"></input>
</form>
</div>
Javascript:
$('#International').click(function() {
var paramChangeBoxes = $('input:checkbox');
if ($(this).is(':checked')) {
$('#Americas').attr('checked', 'checked');
$('#Americas').attr('disabled', 'disabled');
$('#Europe').attr('checked', 'checked');
$('#Europe').attr('disabled', 'disabled');
$('#Asia').attr('checked', 'checked');
$('#Asia').attr('disabled', 'disabled');
}
else {
paramChangeBoxes.removeAttr('disabled');
$('#Americas').removeAttr('disabled');
$('#Europe').removeAttr('disabled');
$('#Asia').removeAttr('disabled');
}
});
Update & Solution:
Cheers to John for the code $('#International').live("click",function() { which corrected the error of the JQuery code not functioning. Apparently if you are importing the code from a remote file you must include the "live" portion inside of your coding.
Thanks again John!
$('#International').live("click",function() {
var paramChangeBoxes = $('input:checkbox');
if ($(this).is(':checked')) {
$('#Americas').attr('checked', 'checked');
$('#Americas').attr('disabled', 'disabled');
$('#Europe').attr('checked', 'checked');
$('#Europe').attr('disabled', 'disabled');
$('#Asia').attr('checked', 'checked');
$('#Asia').attr('disabled', 'disabled');
}
else {
paramChangeBoxes.removeAttr('disabled');
$('#Americas').removeAttr('disabled');
$('#Europe').removeAttr('disabled');
$('#Asia').removeAttr('disabled');
}
});
For Dynamic content (includes and element dom creation after page load) use live.
Have a nice day
There's a lot of room for tightening the following code up, but it works:
$('#International').click(function() {
var paramChangeBoxes = $('input:checkbox');
if ($(this).is(':checked')) {
if (!$('#Americas').is(':checked')) {
$('#Americas').click();
}
$('#Americas').attr('disabled', 'disabled');
if (!$('#Europe').is(':checked')) {
$('#Europe').click();
}
$('#Europe').attr('disabled', 'disabled');
if (!$('#Asia').is(':checked')) {
$('#Asia').click();
}
$('#Asia').attr('disabled', 'disabled');
} else {
paramChangeBoxes.removeAttr('disabled');
$('#Americas').removeAttr('disabled');
$('#Europe').removeAttr('disabled');
$('#Asia').removeAttr('disabled');
}
});

Categories