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()
Related
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);
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);
};
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
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);
I am trying to modify an form using JavaScript to populate the options for this form. I am almost done with but I hit a milestone that I cannot overcome. I am wondering if someone can help. The sample is available form here: http://jsfiddle.net/vladc77/bq5U6/3/
I can assign closed days successfully (Saturday & Sunday), but I cannot change the status (disabling/enabling) of the all working days by checking/unchecking check boxes in the form. Please let me know what can be done without changing the way I assign styles to the check boxes in this line:
$(this).append(' <span class="closed custom-checkbox"><input type="checkbox" name="closed" value="closed" class="closed" id="closedHoursElement" onchange="closedHours()"><span class="box"><span class="tick"></span></span></span>Closed');
Thank you in advance.
it's because you are trying to get siblings of the checkbox.. which it's only sibling is a span element. The select elements are siblings of the parent element.
$('input[type=checkbox]').change(function() {
$(this).parent().siblings('select').prop('disabled', this.checked);
});
http://jsfiddle.net/vladc77/bq5U6/3/
You should also be using .prop() to set disabled attribute. for jQuery 1.6+
From jQuery docs
The .prop() method should be used to set disabled and checked instead of the .attr() method.
Using prop to set the disabled property you can just set it to true or false
$(element).prop('disabled',true); // disabled
$(element).prop('disabled',false); // not disabled