Develop Reference

Reset a checkbox in Materialize?

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);

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()

How to find all drop downs which doesn't have any value selected?

I have a form which I submit manually (using JS) and it makes the querystring direct since it appends it with all the controls id (weather they have value or not) I read somewhere that I can avoid this by disabling the controls that have no values, before submitting the form.
Hence, In my form I have text box, checkbox and select (dropdowns), I am trying to write an inline query which will get all the select which have no option/values selected from its list :
This $('form').find('select option:selected[value!=""]') somewhat works but this $('form').find('select option:selected[value=""]') doesn't at all.
Any help would be appreciated.

This is straightforward to do on form submission, by inspecting each element in the form. Make sure that you provide a way for users to actually re-enable the disabled form elements.
A working code would be:
$("#testForm").on("submit", function() {
$(this).find('select option:selected[value=""]').parent().attr("disabled", "disabled");
alert("ok"); // for debug purposes
return false; // this stops the form from actually being submitted
});
Here's a working fiddle that demonstrates widget disabling:
http://jsfiddle.net/sw6v928m/3/
Edit: Updated to actually select disabled elements
Edit 2: Updated to compact the code a bit, after request from the OP

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);

Skip the usual behaviour of select Input using javascript

I have a form having select Input with some options in the drop down option list.
Requirement: On click of the select Input I need to check validation of form.If the form is incomplete I need to skip the behaviour of select input i.e do not show the option list.
However if the form is complete the select input should show me the options(i.e normal behaviour).
Problem : I did try event.preventDefault() to skip the further action assuming that the select input will not show me the options if the form was incomplete.
But this aint workin
Find the code:
$('selectInput').addEvent('click', function(event){
if(!validateForm()){
if(event.preventDefault){
event.preventDefault();
} else {
//IE
event.returnValue = false;
}
}
});

You could disable/enable the select everytime the validation parameters are changed ?
Otherwise, I noticed you are using jQuery, so you could imple,ent your own or one that is already made with your features...

My suggestion would be to add the options in your onclick. If the validation passes, add the option otherwise don't do anything.