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
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');
}
})
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"/>
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.
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
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" />