Enable Button When Any Checkbox Values Change - javascript

I have a page with multiple checkboxes in varying states (checked or unchecked) . I'm trying to enable a button as soon as any of the checkbox values change state.
Here is my code so far but it doesn't seem to work properly yet:
var checkboxes = $("input[type='checkbox']");
checkboxes.change(function(){
$('#saveChanges').prop('enabled', true);
});

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$("input[type='checkbox']").change(function () {
$('#saveChanges').prop('disabled', false);
});
});
</script>
</head>
<body>
<input type="checkbox" value="1" />
<input type="checkbox" value="1" />
<input type="checkbox" value="1" />
<button id="saveChanges" disabled>Save</button>
</body>
</html>

Try, where submit button would be..
<input type="submit" value="Do thing" disabled>
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});

Try,
<input class="myCheckBox" type="checkbox" value="true">
<input class="myCheckBox" type="checkbox" value="true">
<button type="submit" id="confirmButton">BUTTON</button>
var checkboxes = $('.myCheckBox');
checkboxes.on('change', function ()
{
$('#confirmButton').prop('disabled', !checkboxes.filter(':checked').length);
}).trigger('change');

Related

How to get checkbox value checked and show to input element using Javascript or Jquery?

but the value is only displayed when I click on the checkbox and it does not display the pre-selected values, I want it to show the selected results even if I do not click the checkbox, please correct this code Help me or give me some example code so I can add, thank you!
<script type="text/javascript">
function thayTheLoai() {
var huunhan_theloai = [];
$.each($("input[type='checkbox']:checked"), function() {
huunhan_theloai.push($(this).val());
});
document.getElementById("input").value = huunhan_theloai.join(", ");
}
</script>
<label for="default" onclick="thayTheLoai();" class="btn btn-default">
<input type="checkbox" value="1" id="theloai1" class="badgebox" name="theloai[]" ></input>
</label>
<input id="input" type="text"></input>
<script>
$('#theloai1').prop('checked', true);
</script>
This is demo : https://anifast.com/includes/test.php, I want to not need to click the checkbox and still display the checked results
Use this code and don't forget to use jquery library.
$(document).ready(function(){
$('#theloai1').prop('checked', true);
var huunhan_theloai = [];
$.each($("input[type='checkbox']:checked"), function() {
huunhan_theloai.push($(this).val());
});
document.getElementById("input").value = huunhan_theloai.join(", ");
})
function thayTheLoai() {
if ($('input[name="theloai[]"]:checked').length > 0) {
$("#input").val(1);
}else{
$("#input").val(0);
}
}
You have 2 ways of doing it:
you update the input field from your PHP and MySQL to have the checked="checked" on the selected input fields and the run the function on load:
JS
function thayTheLoai() {
var huunhan_theloai = [];
$.each($("input[type='checkbox']:checked"), function() {
huunhan_theloai.push($(this).val());
});
$('#input').val( huunhan_theloai.join(", ") );
}
$(document).ready(function(){
thayTheLoai();
});
HTML
<label for="theloai1" onclick="thayTheLoai();" class="btn btn-default">
<input type="checkbox" value="1" id="theloai1" class="badgebox" name="theloai[]" />
</label>
<label for="theloai2" onclick="thayTheLoai();" class="btn btn-default">
<input type="checkbox" value="2" id="theloai2" class="badgebox" name="theloai[]" checked="checked" />
</label>
<input id="input" type="text"/>
if you want to update the input field using the $('#theloai1').prop('checked', true);, you should change it so that it also triggers the onchanged event on the input field like this:
$('#theloai1').prop('checked', true).trigger('change');
NOTES
this code is not tested, but it should work
make sure you write valid HTML otherwise you might get unexpected results (I fixed your HTML as well)
<label for="default" class="btn btn-default">
<input type="checkbox" value="1" id="theloai1" class="badgebox" name="theloai[]" ></input>
<input type="checkbox" value="2" id="theloai2" class="badgebox" name="theloai[]" ></input>
<input type="checkbox" value="3" id="theloai3" class="badgebox" name="theloai[]" ></input>
<input type="checkbox" value="4" id="theloai4" class="badgebox" name="theloai[]" ></input>
</label>
<input id="input" type="text"></input>
$(document).ready(function(){
$('#theloai1').prop('checked', true);
var huunhan_theloai = [];
$.each($("input[type='checkbox']:checked"), function() {
huunhan_theloai.push($(this).val());
});
document.getElementById("input").value = huunhan_theloai.join(", ");
})
$("input[type='checkbox']").on("change", function(){
checked_id = $(this).attr("id");
if ($(this).prop("checked") == true) {
$("input[type='checkbox']").each(function(){
if ($(this).attr("id") != checked_id) {
$(this).prop("checked", false);
}
})
$("#input").val($(this).val());
}else{
$("#input").val('some default value');
}
})

Jquery auto trigger event on checkbox unchecks the control

Here is my html and javascript, want to auto check on click of button and oncheck want to trigger some more actions. Tried with 'click' and 'change' event
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#4').on('click', function(){
$('#1').prop('checked', true).trigger('click');
$('#2').prop('checked', true).trigger('click');
});
$('#1').on('click', function(){
if($('#1').is(':checked')){
$('#3').prop('disabled','disabled');
}
else{
$('#3').prop('disabled','');
}
});
});
</script>
</head>
<body>
<label>
<input id="1" type="checkbox" value="">Yes</label><br><br>
<label>
<input id="2" type="checkbox" value="">NO</label><br><br>
<label>
<input id="3" type="text" value="Hello World">Yes</label><br><br>
<input id="4" type="button" value="Submit"/><br><br>
</body>
</html>
Something like this should get you started.
var onYesChecked = function() {
if($('#1').is(':checked')){
$('#3').prop('disabled',true);
} else{
$('#3').prop('disabled',false);
}
};
var onNoChecked = function() {
// your NoChecked logic here
};
$(document).ready(function(){
$('#4').on('click', function(){
// `.prop('checked', true)` will check the checkbox.
// Triggering click will immediately uncheck the checkbox
// (simulating a user click).
// $('#1').prop('checked', true).trigger('click');
// $('#2').prop('checked', true).trigger('click');
$('#1').prop('checked', true);
$('#2').prop('checked', true);
onYesChecked();
onNoChecked();
});
$('#1').on('click', onYesChecked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input id="1" type="checkbox" value="">Yes
</label>
<br><br>
<label>
<input id="2" type="checkbox" value="">NO
</label>
<br><br>
<label>
<input id="3" type="text" value="Hello World">Yes
</label>
<br><br>
<input id="4" type="button" value="Submit"/>

How to disable all checkbox with use of foreach in jQuery

I want to disable all checkbox when click all 'select all'.
How is this possible using jQuery?
JavaScript:
Here categories[] is name of checkbox which is in foreach loop
function checkAll(source) {
checkboxes = document.getElementsByName('categories[]');
for(var i=0, n=checkboxes.length;i<n;i++) {
//checkboxes[i].checked = source.checked;
checkboxes[i].disabled = source.disabled;
}
}
function uncheckAll() {
$('input:checkbox').removeAttr('checked');
}
function disableAll() {
$('input:checkbox').attr('disabled','true');
}
<input type="checkbox" checked>A<br/>
<input type="checkbox" checked>B<br/>
<input type="checkbox">C<br/>
<input type="checkbox" checked>D<br/>
<input type="checkbox">E<br/>
<button onclick="uncheckAll()">Uncheck all</button>
<button onclick="disableAll()">Disable all</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Just use prop('disabled', true)
$('#mainChk').on('click', function(){
var categories = $('.categories');
categories.prop('disabled', !categories.prop('disabled'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="mainChk" type="checkbox" > Main
<input type="checkbox" class="categories"> First
<input type="checkbox" class="categories"> Second
<input type="checkbox" class="categories"> Third
Give all your checkbox a class (ex: class='ck').
Then :
$('.ck').each(function(){
$(this).prop('disabled', true);
})
This will work for you.
<input type="checkbox" checked>A<br/>
<input type="checkbox" checked>B<br/>
<input type="checkbox">C<br/>
<input type="checkbox" checked>D<br/>
<input type="checkbox">E<br/>
<button class="disableAll">Disable all</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".disableAll").click(function(){
$('input[type=checkbox]').each(function(){
$(this).prop('disabled', true);
})
});
});
you can enable disable checkboxes with jquery like this.
$('#checkAll:checkbox').change(function () {
if($(this).attr("checked")) $('input:checkbox').attr('checked','checked');
else $('input:checkbox').removeAttr('checked');
});
Have a look at this demo.

Clear form using a checkbox

I am trying to use a checkbox to clear a form but I do not want the reset to clear the checkbox itself. The code I am using is as follows:
<input name="no_cage" id="no_cage" type="checkbox" value="1" onclick="this.form.reset();">
When I click on the checkbox it clears the form fine but unfortunately, also clear itself too.
The checkbox also updates a db with a 1 if checked or a 0 if unchecked. So I need it within the form and it needs to be able to toggle between checked and unchecked.
There are two ways to do this:
Create a javascript function to reset the form and then check the checkbox again to true.
Using JQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).on('change', '#no_cage', function() {
if(this.checked) {
document.getElementById("client").reset();
this.checked = true;
}
});
</script>
<form id="client">
<input type="text">
<input id="no_cage" type="checkbox" value="1"> CLEAR
</form>
Using Javascript:
<script type="text/javascript">
function clearform(){
if (document.getElementById("no_cage").checked == true){
document.getElementById("client").reset();
document.getElementById("no_cage").checked = true;
}
}
</script>
<form id="client">
<input type="text">
<input id="no_cage" type="checkbox" onclick="javascript:clearform();"> CLEAR
</form>
OR,
keep the checkbox out of the form
<script type="text/javascript">
function clearform(){
document.getElementById("client").reset();
}
</script>
<form id="client">
<input type="text">
</form>
<input id="no_cage" type="checkbox" value="1" onclick="javascript:clearform();"> CLEAR
I don't know if you want it this way, but I change the code that if checkbox is checked than clear form else it won't. Here the code
<form id ="myForm" name = "test">
<input type ="text"/>
<input type ="text"/>
<input type ="text"/>
<input type ="text"/>
</form>
<input name="no_cage" id="no_cage" type="checkbox" onclick="resetForm()">
<script type="text/javascript">
function resetForm()
{
if (document.getElementById("no_cage").checked == true)
{
document.getElementById("myForm").reset();
}
}
</script>
<form id="myForm">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="checkbox" id="box"onclick="myFunction()" value="Reset form">reset
</form>
<script>
function myFunction() {
document.getElementById("myForm").reset();
document.getElementById("box").checked = true;
}</script>
hope it helps

show specified button if any checkbox is checked and hide specified buttons if both is checked

Below is my snippets, what i want is hide only the button that has class of "save" and the button that has a class of "cancel" if both checkbox is not checked, any ideas, help, suggestions, recommendations?
$(document).ready(function(){
$("input[type='checkbox']").change(function(){
if($(this).is(":checked")){
$(".save").show();
$(".edit").hide();
$(".cancel").show();
}else{
$(".save").hide();
$(".edit").show();
$(".cancel").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="edit">edit</button>
<button class="save">save</button>
<button class="cancel">cancel</button>
<input type="checkbox" named="test1" />
<input type="checkbox" named="test2" />
You can try
$(document).ready(function() {
var $checks = $("input[type='checkbox']").change(function() {
var checked = $checks.is(':checked');
$(".save, .cancel").toggle(checked);
$(".edit").toggle(!checked);
});
$checks.first().change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="edit">edit</button>
<button class="save">save</button>
<button class="cancel">cancel</button>
<input type="checkbox" named="test1" />
<input type="checkbox" named="test2" />

Categories