jQuery 1.9 checkbox count - javascript

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.

Related

C# ASP.MVC Get checkbox value using Html.EditFor and JavaScript

Just wondering, Imagine I have a checkbox like this:
<input type="checkbox" id="situationcontrol" name="situationcontrol">
I could check if this is checked or not by using this JavaScript code:
var situationcontrol = $("#situationcontrol").prop('checked');
Now I am wondering how this would work if you make a checkbox using #Html.EditorFor
Like this:
#Html.EditorFor(model =>Model.ServiceDeliveryMutableObjects.SituationControl)
I tried to change the same javascript code with the new generated ID
var situationcontrol = $("#ServiceDeliveryMutableObjects.SituationControl").prop('checked');
But that doesnt seems to work.
Any Idea how this would work?
Thanks
Edit: When I inspect element in browser when I use #Html.EditFor
EDIT
Didn't snap to that until you posted the rendered output. The . is not valid in HTML ids, so Razor uses underscores instead. So, the id you should be selecting is #ServiceDeliveryMutalObjects_SituationalControl, rather than #ServiceDeliveryMutalObjects.SituationalControl. Other than that, the rest of my original answer applies.
ORIGINAL
First, actually it's better to use:
$('#foo').is(':checked')
Now, as for using EditorFor, technically, this doesn't change anything. The id will obviously be based on the object graph, i.e. #ServiceDeliveryMutalObjects_SituationalControl, but nothing changes about the actual rendering of the HTML element. I emphasized "technically", here, because while that should be case, there's no default editor template that will actually render a checkbox input. The default is a text box, and a text box, obviously will not have a checked property. This can be corrected by either:
Use CheckBoxFor instead. That way, you're assured of getting an actual checkbox input.
Assuming this property is a boolean, you can create the view Views/Shared/EditorTemplates/Boolean.cshtml with something like:
#model bool?
#Html.CheckBox("", Model)
Then, EditorFor will use this template, and generate a checkbox input.
Finally, it may just be a typo in your question, but you want lowercase "model", not "Model", on the right side of your expression. In other words, it needs to match the left side of the lambda. I tend to avoid using model in these expressions, as not only is it more to type than needed, but you can easily get confused between "model" and "Model", especially with Intellisense's autocomplete. For example,
#Html.EditorFor(m => m.ServiceDeliveryMutableObjects.SituationControl)
You can change your code like this
Var situationcontrol = $("#ServiceDeliveryMutableObjects_SituationControl").prop('checked');
You need to remove .in Id of elements in mvc reazor view it's will convert '.' To '_' when we provide in elements name.

Cloned checkbox "checked" property undefined

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)

Trouble getting value of dynamically created textbox jquery

I have a webpage where the user inputs a number into a textbox and then that number of rows are created in a table with textboxes in each row with the id in the format of "id[I]" where I is the number assigned from the for loop used to add the textboxes. On form submit I'm trying to get the value of these textboxes. This is my form submit code to test things out.
$("#biopsyform").submit(function () {
var site = $("#site[1]").attr("value");
alert(site);
});
when I submit the form I get an alert of undefined
I've tried saying var site = $("#site[1]#).val(); and get the same result.
When using chrome developer tools in the javascript debugger when I break before the alert, it shows the correct value for $("#site[1]") so I'm not quite sure what is going on.
Any help is greatly appreciated.
Here is a jsfiddle I'm getting an error in jsfiddle when I submit and I'm not sure why, I've never used jsfiddle. It could be part of my problem, it could be when I copied stuff over to jsfiddle, I don't know.
Try escaping [ and ] with \\
var site = $("#site\\[1\\]").attr("value");
or
var site = $("#site\\[1\\]").val();
FIDDLE DEMO
You were missing a $ sign.
You need to use the parent of the $("#site[1]").attr("value");
Example:
$("#parent").find("#site[1]").val();
Or any variations of that.

Jquery binding seems to fail

I'm currently working on a jQuery script which is giving me alot of trouble. I'm no expert on the framework, but I've used it successfully in a number of occassions in the past.
I'm trying to setup what amounts to be a subform of a subform. I.e. the user is filling out a questionnaire, based on user input additional form fields show and in this case, based on that input more fields can show.
So in this case I load in a script which searches for the controling elements and binds something to their change event. This approach works on the first form field, but not on another. The content is loaded with the rest of the html, not via ajax. The really weird part is that using a debugger and watching the console I can tell that the script below is finding the elements I want, and tries to call change(), but then the event never fires!
$('td.subFormYesControl input.CodebtorParentQuestion').each(function() {
console.log("Hit");
//alert($(this).prop('class'));
$(this).on("change", function() {
if ($(this).val() == "1") {
$(this).parents('tbody').eq(0).children('tr.subFormRow').show();
$(this).parents('tbody').eq(0).siblings('tbody.CodebtorSubForm').show();
} else {
$(this).parents('tbody').eq(0).children('tr.subFormRow').hide();
$(this).parents('tbody').eq(0).siblings('tbody.CodebtorSubForm').hide();
}
});
});​
I've been doing some trial and error testing with very little luck. If I change this from being wrapped in $(document).ready() to $(window).load() it works in FF, but not IE.
Does anyone have any idea what might be going on???
EDIT: Thanks for all the help! There is alot of generated html in the implementation I'm using, so here is the parent element of the control I'm trying to work with. Let me know if more would be helpful!
<td class="subFormYesControl"><input type="radio" value="1" id="c1_CodebtorsParent[0]0" class="CodebtorParentQuestion" name="c1_CodebtorsParent[0]"><label for="c1_CodebtorsParent[0]0">Yes</label><br><input type="radio" checked="checked" value="0" id="c1_CodebtorsParent[0]1" class="CodebtorParentQuestion" name="c1_CodebtorsParent[0]"><label for="c1_CodebtorsParent[0]1">No</label><br></td>
EDIT 2: It seems to get more strange, but I think I've found a clue. If I add a simple alert as shown below:
alert($(this).prop('class'));
$('td.subFormYesControl input.CodebtorParentQuestion').each(function() {
$(this).on("change", function() {
console.log($(this).length);
if($(this).val() == "1") {
$(this).parents('tbody').eq(0).children('tr.subFormRow').show();
$(this).parents('tbody').eq(0).siblings('tbody.CodebtorSubForm').show();
} else {
$(this).parents('tbody').eq(0).children('tr.subFormRow').hide();
$(this).parents('tbody').eq(0).siblings('tbody.CodebtorSubForm').hide();
}
});
});
The code seems to work! Remove the alert, it stops working!!! Any ideas????
Thank you for all the help everyone. I was preparing the jsfiddle and removing a few seemingly unrelated plugins. when I removed one of them, an intellitext tool, the code began working just fine in all browsers. I've gone through testing and was even able to push the code back to document.ready, so I think I'm going to mark it answered and chalk it up to a plugin compatibility issue/bug.
Thanks again everyone
I have tested your HTML sample and jQuery codes. Interestingly, you have used two radio inputs, those two input changes simultaneously or any of them toggles with the change of other one. Simple if you change one's value to 1 then it will automatically changes the other one's value to 0
Also you have used if ($(this).val() == "1") so if one's value changes to 1 and the other changes to 0 as well. So both changes does actually first show then hide, which makes to seem no event fired.
Comment out or remove the console.log() line. IE will choke on it unless the developer tools are open when running the script.
How about using the following?
$(this).live ("change", function() {
//...
});

Get all elements of a specific type using ExtJS

Hello I have been using JQuery for quite a while. I need to get the ids of the checked elements. I have all my checkboxes as rows sitting inside a container, and I want to get the ids of all the checkboxes that have are checked.
I would use
$("#container input:checkbox")
to get all the checkboxes in that container, and then would check for which ones have been checked.
To do the same in ExtJS, i have been using the "get" method, and would do a
Ext.get('input')
which gives me all the input items, but I still have to check if they are of type "checkbox", is there a way I could get only the checkbox elements from DOM?
The equivalent function to JQuery's selector would be either Ext.query, or Ext.DomQuery.selectNode.
Ext.Query works in a very similar way as JQuery (see how the selectors work here).
In your case, you could try this:
Ext.query("#container input:checked")
Of course, this will only obtain DOM values rather than Ext components.
If you are using the CheckboxGroup object, you can use the getValues() method which will return an Array of the Checkboxes which you can use to look at the values...

Categories

Resources