I have a series of checkboxes for each day of the week with an "All" checkbox to check/uncheck all days. My use case requires multiple sets of these checkboxes, and as I'm creating them dynamically, I used the jQuery.clone() function to duplicate the set and add them to a new row; however the cloned checkboxes do not work correctly. The OnClick event fires; but for whatever reason, I can't access the 'checked' property on any of the cloned checkboxes in Chrome. I have tried the following methods (using the All checkbox as an example):
$('input[name="all"]:last').prop('checked')
$('input[name="all"]:last')[0].checked
$('input[name="all"]:last').attr('checked')
All return undefined. The only method I have found that actually returns anything with regards to the checked state is:
$('input[name="all"]:last').is(':checked')
I have the bug replicated here: http://jsfiddle.net/YfY5U/
Really hoping someone has some idea of what's going on, because I'm totally stuck :(
In this part of code:
var new_content = $('.initial').clone()
.removeClass('initial')
.find(':checkbox').each(function(){
$(this).removeProp('checked');
}).end().appendTo('fieldset');
You are removing property "checked" after cloning. So no surprised that it is undefined.
Just change
$(this).removeProp('checked');
to
$(this).prop('checked', false)
Related
I have this function that iterates over all checkboxes in a table and checks them. I also made a counter that will count the number of rows checked. Interestingly, the counter always returns one higher than my expected value. The counter is initialized as 0, so I expect it to increment for every checkbox but something else seems to be going on. Anyone know why this is?
var counter=0;
$('#checkAll').click(function (event){
$(':checkbox').each(function(){
this.checked=true
counter+=1
});
});
Minimal reproducible example: https://codepen.io/enyu0510/pen/eYrEgJe
You have four checkboxes on this page including the select all checkbox - that’s why this is happening. You will need to be more specific and target only the list item checkboxes. One way to do this would be to name the checkboxes you want to count like name=list-checkbox For example - And then target those checkboxes like like $(“[name=list-checkbox]”)
Updating answer to this question because OP update it with the example of the code that is not working
Updated answer
Reason why you are getting value higher than expected is because you have 4 checkboxes in that example. You have to target checkbox list/group in a more specific way (e.g. by their name) because with $(':checkbox') you are counting all checkboxes on the page
Old asnwer
Above code looks fine. Working as expected https://jsfiddle.net/vwxcap9o/.
Make sure to check that there isn't any other checkbox on that page, maybe that's the reason why you are receiving wrong number. Also, try to target that checkbox group in different way than $(':checkbox').
I have a column with a celltemplate of checkbox. It can be selected/unselected, which works fine as correct events are fired everytime. However, when I select multiple checkboxes on the grid and start scrolling up and down, the checkboxes seem to be scrolling as well. That means that they are not fixed to the rows they are checked against, and get lined up against a wrong row.
This issue has already been reported here a couple of years ago. But the solution posted, does not solve the problem.
Here is a plunker link to demonstrate the issue. Anyone had any similar issue or a workaround to this?
You are not binding the checkboxvalue to your dataset. Thanks to your provided Plunker I can provide an updated Version that works.
The ng-model is bound to the gridscope and has a private scope for each row, so its fine to use somethnig generic
ng-model="foo" ng-change="row.entity.active = foo"
You can use active == 1 but I used true/false for convenience
ng-checked="row.entity.active" //since foo becomes true or false on click
If you want more complex checks, you can use their appScopeProvider.
I have a problem with jQuery function clone(). I think the problem is in the withDataAndEvents input parameter of this method.
Initially, I'm coding a table that has dynamic rows. I'm adding dynamically rows when clicking on a button put only in the first row. the first row contains initially many inputs fields and combo-boxes. Each field is initalized by an ajax call. And each action on a field leads to the refresh (filtering) on the whole fields of a row. I'm also using autocomplete on input fields.
The first row works perfectly. However, when cloning the tag:
If I did not enter values in the first row, the cloned and first row work fine
If I enter a value or values in first row fields and after I clone the , only the first row fields still work. In this case, if I try to change the value of the combo-boxe (which fire a change event for all concerned row fields), the fields of the first row are impacted despite using Ids when changing autocomplete data. Ids of fields, combo-boxes, table rows are dynamically created when clicking on the button to clone the widget.
The code I wrote is too long so I created a fiddle and simplified the case and still have the same problem.
I tried many suggestions that I've found like this, this one or this one in vain :-(
(data.('autocomplete', null), autocomplete("destroy") ...)
Do you have ideas about this issue ?
thanks in advance
Aside from the typo in the test (you are selecting by class instead of the new element by id), the basic problem is you are applying autocomplete before you add it to the DOM.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/87jcw1y0/2/
I just reversed the order of these two lines:
$('.body').append(clone);
applyAutoComplete2('#myinput' + inc);
The cause... Some plugins use storage data associated with the DOM element, or attach events to ancestors etc. None of these can happen with a disconnected DOM element, so just attach it to the DOM first.
I think ur asking this
Check in this link http://jsfiddle.net/bsarunmca/87jcw1y0/3/
applyAutoComplete1('#myinput1');
$("button").click(function() {
inc = inc+1;
$('#myinput1').clone().attr('id','myinput'+inc).appendTo('.add-this');
$('#myinput'+inc).val('');
applyAutoComplete2('#myinput'+inc);
});
I have an ASP.NET gridview, with the code below (modified from another stackoverflow question) to make the row clickable.
e.Row.Attributes("onclick") = Me.Page.ClientScript.GetPostBackClientHyperlink(Me.gvPricingGrid, "Select$" & e.Row.RowIndex)
I also have a button that, when clicked, flips a boolean held in the session (accessed through a code-behind property), and makes visible some textboxes in each row for updating the row. The property is called IsEditingProperty
What I want is for the onclick to work as it does now when IsEditingProperty = False, but do nothing when the property = True. I have tried the below, but the property is evaluated at render, rather than when the click actually occurs.
e.Row.Attributes("onclick") = "if (""<% IsEditingProperty() %>"") " & Me.Page.ClientScript.GetPostBackClientHyperlink(Me.gvPricingGrid, "Select$" & e.Row.RowIndex)
Is there a way to make this happen?
I ended up dealing with this by realizing that rowCreated happens on postback simply adding the check against the property there.
I have some old jQuery code from 1.6 that works perfectly but I'm currently redoing the website and upgraded to 1.9.1 jQuery and my old code does not work.
$("input[type=checkbox][name=compare[]]").click(function() {
var bol = $("input[type=checkbox][name=compare[]]:checked").length >= 5;
$("input[type=checkbox][name=compare[]]").not(":checked").attr("disabled",bol);
$(this).closest("tr").toggleClass("marked", this.checked);
});
I have table rows with a single checkbox with the value of the row, if checked it pushes the row id into an array so I can work else where with it. It also only allows up to 5 checkboxs to be active at once and disables the rest so they can't be checked (yes I know these can be done via DOM but it's checked in PHP before any processing). It would also apply the class marked which is just a darker bg to help to make it easier to read.
I receive the following error in the javascript console in chrome on load
Uncaught Error: Syntax error, unrecognized expression: input[type=checkbox][name=compare[]]
At the time the code was more of a hack job and surprised my self that it even worked (lol).
The following code would select the checked checkboxs and put the value into array so I could json' it off via ajax.
$("input[type=checkbox][name=compare[]]:checked").each(function() {
data['id[]'].push($(this).val());
});
I've started to rewrite it but hit a problem when trying to give each checkbox it's own unique identifier, while before jquery would do it self.
.compare_check is class of the checkbox
$('.compare_check').click(function() {
if (!$(this).is(':checked')) {
// do some work on
Any help would be greatly appreciated.
Wrap the value for the attribute you want to check in double quotes, so you'd have:
$('input[type=checkbox][name="compare[]"]')
rather than
$("input[type=checkbox][name=compare[]]")
Alternatively you can use \\ to escape the [ and ] in the attribute name:
$("input[type=checkbox][name=compare\\[\\]]")
You should probably also be using .prop(), rather than .attr(), to set the elements as disabled.