Reset a checkbox in Materialize? - javascript

I have a set of checkboxes that I want to uncheck if the user changes their dropdown selection, and I am using the Materialize checkbox.
I have a function that gets triggered fine when the value changes, and I've confirmed that. I also know you have to reinitialize certain form fields on Materialize if you use Javascript to update their values, but I can't seem to find how to do that for checkboxes in their documentation.
I tried using the good ol' .prop("checked", "true") trick, but that doesn't seem to reinitialize the checkbox with the updated property.

materialize css version : 1.0.0
//Find checkbox if checkbox is checked:
if($('#your_check_box_id').is(':checked'))
//Uncheck
$('#your_check_box_id').prop("checked", false);

Related

Disable JQuery datatable checkbox when selected by user

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.

jQuery unchecking and reselecting checkbox programmatically

I have a bootstrap modal with a form inside, This means I require to programmatically set check boxes. When I attempt to programmatically select, deselect then reselect the checkbox the reselection doesn't get made.
Whenever I call .attr('checked', false); the following .attr('checked', true) doesn't seem to make changes.
How can I check the checkbox after it been unchecked?
HTML
<input value="None" name="hazards[]" id="hazard1" type="checkbox">
jQuery
$('#hazard1').attr('checked', true); //automated input check
$('#hazard1').attr('checked', false); //User cancels form and unchecks input
$('#hazard1').attr('checked', true); //Reopens form, but doesnt get checked
Thanks to Stryner for poinitng out this quick solution for something I have overlooked.
The solution is to simply replace the .attr() with .prop(). This is an updated syntax that replaces the .attr. Unlike the 'attribute' providing just a string, the 'property' provides more infomation on its property type allowing the use of bools (which are needed for checkboxes).
.prop() vs .attr()

Disable h:inputText with jQuery

I'm trying to make a h:inputText disable status dynamic, through jQuery (not using reRender because of the performance).
I have a javascript function, wich is responsible for updating the value and other statuses for a bunch of h:inputText. No problem updating their values, but when it comes to updating the disable status strange things happen. I cannot actually disable a field, even trying all the options below:
jQuery(document.getElementById('form:fieldID')).attr('disabled', 'disabled');
jQuery(document.getElementById('form:fieldID')).attr('disabled', true);
jQuery(document.getElementById('form:fieldID')).prop('disabled', true);
Calling any of the options above on a field, will result in a final html equals to <input disabled="">, which will also enable the previously disabled fields.
I've tested this with JSF 1.2 and a bunch of versions of jQuery.
You can use this: http://api.jquery.com/attribute-ends-with-selector/
$("[name$=':fieldID']").attr("disabled", true); //for normal input field
$("[name$=':fieldID']").attr("disabled", true); //for checkbox and radiobutton (disable all options)
$("[name$=':fieldID'][id$=':1']").attr("disabled", true); //for checkbox and radiobutton second option

Uncheck all (auto generated) checkboxes

I have a page with 10-25 checkboxes, for a User to choose from.
The checkbox Name and Value are unique to every User/choice and is handled appropriately in the backend.
So, without relying on those two properties, is it possible to create a simple "Uncheck all" button that will uncheck all the checked checkboxes?
I guess it's OK to use the ID attribute, I can add one to the template.
The page is built with HTML and JQuery 2.0.3
Here is a sample checkbox:
<input type="checkbox" name="10953734" value="82S1X93">
here is a small jQuery to solve your issue.
$("input[name='10953734']").prop("checked", false);
or if you want all check box inside a container to be unchecked
$("#containerID input[type='checkbox']").prop("checked", false);
Add a class to them:
$("input.myClass").prop("checked", false);

Dropdown Check List Radio Unselect

I use this very nice plugin in my project called jQuery Dropdown Check List (https://code.google.com/p/dropdown-check-list/) specifically one of example which is named: 'Single select with radio buttons instead of checkboxes'.
One big problem with this example is that I am not able to (I was trying to do this by jQuery) set radio button unchecked. I was using for example:
$("input:radio").attr("checked", false);
Or
$("input:radio").removeAttr("checked");
And unfortunately nothing. Can anyone give some advice how fix this thing?
Try this:
- For check:
$("input:checkbox").attr("checked", "checked");
or
$("input:checkbox").prop('checked', true);
-For uncheck:
$("input:checkbox").removeAttr("checked");
or
$("input:checkbox").prop('checked', false);
I tried both methods in the demo page(http://dropdown-check-list.googlecode.com/svn/trunk/doc/dropdownchecklist.html) for the "Single select with radio buttons instead of checkboxes", and turns out to be fine: the selected radio button has removed. However, the value stays in the span because remove selected radio cannot remove selected value.
My suggestion is that after you uncheck the radio, also set a html space to the span, it removes the selected value and also keep the height of its container.
This plugin uses checkbox not radio inputs so you must use $('input:checkbox') or $('input[type="checkbox"]') as your selector!
Click here to see a demo!

Categories

Resources