I would like to disable the datatable checkbox (which is the first column of my table). Basically, when a button is clicked, all selected checkboxes should be disabled.
I am able to get the indices of selected rows by using
table.column(0).checkboxes.selected();
But I'm not quite sure how to proceed from there, aka how to reference the checkbox elements. I've tried using
var checkboxes = document.querySelectorAll('input[type=checkbox]')
to get all checkboxse, but I wasn't able to use prop('disabled', false). For example, when I do
checkboxes[1].prop('disabled', false)
I get the "prop is not a function" error.
Could someone help me here?
checkboxes isn't a jQuery object so it doesn't have a prop function. Use var checkboxes = $('input[type=checkbox]') instead and see if that works. Also, you probably want to set disabled to true, not false.
Related
I have values from one form that need to be transferred to another.
var manager = $('input[type=checkbox]:checked').val();
I'm capturing the value with this. and trying to send it to this.
$('input[type=checkbox]:checked').val(manager);
but I don't know what to put into the next set of jquery to transfer it over.
.val() works for strings/numbers but not checkboxes or radio buttons which I am trying to do.
Please advice.
Try jQuery prop() function to transfer the state of one checkbox to another.
Also use correct selectors. $('input[type=checkbox]:checked') will only select CHECKED checkboxes.
see this fiddle for an example: https://jsfiddle.net/iPirat/p5f07br4/
in this fiddle, the checkbox in the first form is selected similarly to what you did.
the checkbox insecond form is selected using an ID.
According to MDN the value attribute is optional except when the value of the type attribute is radio or checkbox. But it doesn't seem to be correct. Is there anything wrong with the following:
<input type="checkbox" id="input">
<script>
document.getElementById('input').onchange = function () {
alert('Checked!');
};
</script>
DEMO
The value attribute is only required if you want the checkbox to post through a value when you submit a form. If you're not submitting a form but just want to know when it's clicked, then there's nothing wrong with your example.
Note that your example will also alert "Checked!" when the user un-checks the box too. That's why you might also want to look at the value of the checked attribute in your Javascript.
I think document says that it is mandatory to have the value when you need the selected option when posted back and to know what value is selected, i am not sure how why do you think your code should not work . In current case if you submit the form and you have to checkbox you will not come know what value is being selected.
checkbox: A check box. You must use the value attribute to define the value submitted by this item. Use the checked attribute to indicate whether this item is selected. You can also use the indeterminate attribute to indicate that the checkbox is in an indeterminate state (on most platforms, this draws a horizontal line across the checkbox).
For checkbox you may check for the 'checked' propoerty is true or false since checkbox is always used either as a flag / Boolean expression .
document.getElementById('input').onchange = function () {
alert('Checked!');
alert(document.getElementById('input').checked);
};
so I am trying to implement the Jquery .serializeArray() method to transform a form into a JSON string to send it out in a request. This works great for my form except for checkboxes and radio buttons. The only time this works properly is when they are checked. Sometimes, I need to know if they are unchecked. They still need to get serialized.
I suppose I could manually loop through the form and grab the values and build the JSON object, but that would not be optimal.
According to the Jquery documentation found here: Jquery Docs anything that fits the W3 standards for a successful control found here should get included. Unfortunately, this does not include checkboxes that are not checked. Does anyone have a work around for this behavior? Thanks in advance...
var form = document.getElementById('f');
console.log($(form).serializeArray();
That spits out the serialized form with the checkboxes that are not checked excluded...
If you really want to use checkboxes and radio buttons, have those input fields update a corresponding hidden field. That way, the hidden input will always be sent.
how about trying this, I had a similar problem, I thought unchecked checkboxes should have a value as well, here is a quick work around,
add an extra class on each checkbox on your form "cbx"
make data an array from the form with serialise
then loop through all checkboxes with a class of "cbx"
and add them to the array with a value of 0, AFTER the array has been created with (serializeArray())
when you post the data you will see the unchecked checboxes and values of 0 will get transferred with the post.
var data = $('#form').serializeArray();
$(".cbx:not(:checked)").each(function() {
data.push({name: this.name, value: '0' });
});
$.post("testpage.asp", data);
An alternative would be to use a jQuery plugin. For example, serializeJSON has the option to set the value for unchecked checkboxes like this:
$('form').serializeJSON({checkboxUncheckedValue: "false"});
In any case, it is usually best to use hidden inputs for unchecked values.
Alright, so I developed a workaround.
Basically I wrote a function to compare the original JSON object to the serialized form. As I looped through, I compared the components. If there was a discrepancy, I pulled the component off the form and manually inserted it into the JSON. I used the array.splice() method to add the missing components. Worked for all of the missing inputs.
I have this form:
http://dl.dropbox.com/u/14698783/project/register/form.htm
The city input is hidden by default.
I want to display it when the visitor choose USA or Canada only.
For this, I'm using jQuery. First, I set up and event handler for the country dropdown using the change method - this will be raised when the value is changed (not surprisingly). Then test if the value selected is in a set of accepted values (for this, I'm using the 'in' operator). Since this is an input element, I can just reference element.value without wrapping it in jQuery. Finally, use the toggle, passing in the boolean value to indicate if the select should be shown or hidden.
var valuesToShowFor = [0, 1]; // USA + Canada
$("#title").change(function() {
var shouldShowCity = (this.value in valuesToShowFor);
$("#city").toggle(shouldShowCity);
});
Example: http://jsfiddle.net/jonathon/xULyc/
For this, I recommend having IDs on your elements. It makes it much easier and neater to do the jQuery selects - otherwise you'd need something like $("input[name='title']") to reference the element.
Here are some clues for you:
Catch onchange with jQuery .change()
Get the selected option value with jQuery .val()
If the selection option value is one of those you need, use jQuery .show() to show the other input box (and .hide() to hide it)
HI,
I have multiple checkboxes in my report. I am using two buttons Select All and Deselect All for selecting all checkboxes and deselecting all checkboxes. But am not able to pass the checked values to another report. Only if I manually select the checkboxes then only those values are getting passed in the report.
Can anyone help me out with this?
I assume your select all and deselect all buttons are using javascript to set or unset all the other checkboxes in the form.
unset checkboxes are not passed on. only the set one. If you need an explicit 0 or 1 to get passed over, you will have to do something like adding extra hidden fields are are sync'ed to the state of the checkboxes, but this will be riddled with problems (eg, no javascript = FAIL).
You can have a bunch of hidden fields to accompany the checkboxes, and set their values when the checkboxes are unchecked.
Alternately, when you need two or more states for a field, use a radio button.