We Keep Coding

How to extract this function to not duplicate code

This code checks if the checkbox is enabled on site if it is disabled then it disable the textbox.
Function disableTextBox() is a onclick function and the $(function() is used to check the behavior of the checkbox after refreshing the page, I did not use the localstorage for that because sometimes different browsers are used.
How can I write this code better to do not duplicate it?
If the checkbox is checked then the textbox should be enabled, if the checkbox is not checked then the checkbox should be disabled for any input. It saves the checkbox after clicking save button (that is different functionality) not connected with this problem, and when the user back to the page it should check if the checkbox is checked or not and adjust the textfield.
Any ideas how to write it better or something?
$(function()
{
var checkboxField = document.querySelector('#checkbox');
var textBox = document.querySelector('#textBox');
if (checkboxField.checked == true)
{
textBox.disabled = false;
}
else if (checkboxField.checked == false)
{
textBox.disabled = true;
}
});
function disableTextBox()
{
var checkboxField = document.querySelector('#checkbox');
var textBox = document.querySelector('#textBox');
if (checkboxField.checked == false)
{
textBox.disabled = true;
}
else if (checkboxField.checked == true)
{
textBox.disabled = false;
}
}

Call your disableTextBox() function, and instead of the if/else you could use the evaluated boolean result of checkboxField.checked straight ahead:
function disableTextBox() {
var checkboxField = document.querySelector('#checkbox');
var textBox = document.querySelector('#textBox');
textBox.disabled = !checkboxField.checked;
}
jQuery(function( $ ) {
// Do it on DOM ready
disableTextBox();
// and on button click
$('#btnDisableTextBox').on('click', disableTextBox);
// Other DOM ready functions here
});

prefering this way ;)
in this story every thing is boolean
Don't do testing if a boolean is True to déclare a true value for a if...
const
checkboxField = document.querySelector('#checkbox'),
textBox = document.querySelector('#textBox');
checkboxField.onchange = function()
{
textBox.disabled = !checkboxField.checked;
}
<label> modify texy <input type="checkbox" id="checkbox" checked>
<textarea id="textBox"disable> blah blah bla</textarea>

Disable button if no checkbox is checked jquery

I have a jquery function for multiple delete.
$('input.delete-selected[type="submit"]').attr('disabled','disabled');
$('[id^=partners_], [id^=invitations_], [id^=clients_], [id^=partner_services_], [id^=partner_products_]').on("click", function (event) {
if ($(this).is(":checked")) {
$('input.delete-selected[type="submit"]').removeAttr('disabled');
} else {
$('input.delete-selected[type="submit"]').attr('disabled', 'disabled');
}
})
The problem is, if I have 2 items, select both and then deselect one of them, the 'delete' button disables again.
How can I disable the button only if no checkbox is checked?
Do I have to implement an each function?

Use prop():
$('input.delete-selected[type="submit"]').prop('disabled', ($('[id^=partners_]:checked, [id^=invitations_]:checked, [id^=clients_]:checked, [id^=partner_services_]:checked, [id^=partner_products_]:checked').length == 0));
This will disable the button depending on the second parameter evaluation state.
If it is true, button will be disabled, if not button will be enabled.
$('[id^=partners_]:checked, [id^=invitations_]:checked, [id^=clients_]:checked, [id^=partner_services_]:checked, [id^=partner_products_]:checked').length will get the number of checkboxes checked.

Try this : get all checkbox selector in one variable and bind the click event to it. Inside click handler see if any of the checkbox is checked then enable / disable the button accordingly. Use .prop() instead of .attr()
$('input.delete-selected[type="submit"]').attr('disabled','disabled');
var $checkbox = $('[id^=partners_], [id^=invitations_], [id^=clients_], [id^=partner_services_], [id^=partner_products_]');
$($checkbox).on("click", function (event) {
$('input.delete-selected[type="submit"]').prop('disabled', $checkbox.is(':checked').length==0);
});

You can use a variable flag to count how much checkbox is checked, if atleast one is checked then remove disabling else you know.
$('input.delete-selected[type="submit"]').attr('disabled','disabled');
$('[id^=partners_], [id^=invitations_], [id^=clients_], [id^=partner_services_], [id^=partner_products_]').on("click", function (event) {
var flag = 0; //HERE IS THE VARIABLE
if ($(this).is(":checked")) {
flag += 1; //HERE
} else {
flag -= 1; //HERE
}
});
if(flag <= 0)
{
$('input.delete-selected[type="submit"]').attr('disabled', 'disabled');
}
else {
$('input.delete-selected[type="submit"]').removeAttr('disabled');
}

$('input.delete-selected[type="submit"]').attr('disabled','disabled');
$('[id^=partners_], [id^=invitations_], [id^=clients_], [id^=partner_services_], [id^=partner_products_]').on("click", function (event) {
if ($(this).siblings().andSelf().prop("checked").length > 0) {
$('input.delete-selected[type="submit"]').removeAttr('disabled');
} else {
$('input.delete-selected[type="submit"]').attr('disabled', 'disabled');
}
})

Javascript - Checkbox checked condition [duplicate]

This question already has answers here:
How do I determine if a checkbox is checked?
(8 answers)
Closed 8 years ago.
I have a input checkbox, i want to run different block of code, when checkbox is ticked & vice versa.
function checkboxEvent(){
if checked{ ....Run this block }
else { ....Run this block }
}
How to identify in function whether checkbox is checked or not?

Like this:
if(document.getElementById('id of the check box here').checked){
// it is checked. Do something
}
else{
// it isn't checked. Do something else
}
.checked property returns a boolean indicating whether the element is checked or not.

you can check check box value as follows
document.getElementById("myCheck").checked
So your function would be something like ..
function checkboxEvent(){
if (document.getElementById("myCheck").checked){ ....Run this block }
else { ....Run this block }
}

its very easy to find checked property, just use below code
if( $('input[name="transport"]').is(':checked') ) {
alert('checked');
alert($(this).attr('id'));//To get ID of checkBox
}

You might want to check the checked property when the check box is clicked, do:
// onchange event listens when the checkbox's state is changed
document.getElementById('box').onchange = function(){
if(this.checked) alert("y");
else alert("no");
};
DEMO
.checked is a boolean indicating state of checkbox.

< input type="checkbox id="remember" >
<script>
var remember = document.getElementById('remember');
if (remember != null && remember.checked){
alert("checked") ;
}else{
alert("You didn't check it! Let me check it for you.")
}
</script>

Try this :
function checkboxEvent() {
var boxes = document.getElementsByName("chkbox");
for (i = 0; i < boxes.length; i++) {
if (boxes[i].checked) {
console.log(" Checked!");
} else {
console.log("not checked");
}
}
}
The for loop will look up through all of your checkboxes and see if they are checked.
Alternatively, you can use .hasAtrribute .You can find more info about .hasAttribute here

Execute custom function onChange

Pure JavaScript.
I have a checkbox in HTML page. I want to execute
App.setCheckedProperty(name, val);
Where name is name attribute of the checkbox and val true/false means checked.
How to implement it? I can't find any materials aboit it on the Net.
UPD:
<input type="checkbox" name="smth" onChange="<WHAT TO DO HERE?>" checked />
Final execution must be equal:
App.setCheckedProperty("smth", false);
UPD2:
Are there any contructions like this.name or this.checked in JavaScript?

you shouldnt do it "inline" inside your html. its just bad practice. i think what you want to do is to loop over a couple of checkboxes?
see this code:
// declare all vars that you need and find all input-elements
var i, input, inputs = document.getElementsByTagName('input');
// loop over all input-elements
for(i = 0; i <= inputs.length; i++) {
input = inputs[i];
// if the current element is a checkbox
if(input.type === 'checkbox') {
//append a click-handler to that checkbox
input.onclick = function () {
// if the checkbox is clicked, you can find the name and the checked-property
App.setCheckedProperty(this.name, this.checked);
};
}
}
and a working example here (i just alert instead of App.setCheckedProperty): http://jsfiddle.net/5wExJ/

Determine if all checkboxes within jQuery object are checked, return as boolean

Hey all. I've been been trying to figure this out for a while now.
I create a jQuery object of checkboxes and store it in a variable:
$group1 = $('#checkbox1,#checkbox2,#checkbox3,#checkbox4');
The user cannot continue unless all checkboxes in that group are checked.
I've been using an if statement combined with .is(':checked') to find a boolean value:
if( $group1.is(':checked') ){
//continue is OK
}
...but .is(':checked') will return TRUE if any checkboxes are checked within the group. Essentially, .is(':checked') performs an OR operation on the selected elements in $group1. I'm looking for an AND operation, so all selected elements must be checked to return TRUE. Is there a jQuery function that does this, or another workaround?

#Adam is off just a bit
if( $group1.filter(':not(:checked)').length === 0){
//continue is OK
}

Corrected:
You could filter to get only the elements that are not checked, and then check to see if any are any elements still in the collection, if there are not than all the elements in the group are checked:
if( $group1.filter(':not(:checked)').length === 0){
//continue is OK
}

I think you need something like:
$(document).ready(function(){
var checked = true;
$('input:checkbox').each(function(){
if(checked){
checked = $(this).is(':checked');
}
});
});
This should set checked = false if any of them are unchecked.

I would suggest that you give your checkboxes a a class then
var len = $('.check_needed').length;
var chk = $('.check_needed:checked').length;
if (len == check){
//carry on
}else{
// go home
}

You can use also
$(function(){
// add multiple select / deselect functionality
$("#selec_all_chk").click(function () {
$('.chk_class').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// else uncheck
$(".chk_class").click(function(){
if($(".chk_class").length == $(".chk_class:checked").length) {
$("#selec_all_chk").attr("checked", "checked");
} else {
$("#selec_all_chk").removeAttr("checked");
}
});
});