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');
}
})
Related
I have two group of checkbox newBuilding & oldBuilding.
Idea over here is I can select checkbox only one of the group.
In each group there is checkbox name other area, so I when click on it, it will show and hide textbox next to it.
Now to achieve first point, lets for example that already we have oldBuilding checkboxes are checked and I if I click one of the newBuilding checkbox then it will remove the check from oldBuilding group but newBuilding checkbox will not get checked but just get focus, I have to click again to check.
What I found out that above issue happen when I call trigger event. How can I overcome the issue
Code for other area
$("#chkOldBuildingOtherAreas").change(function () {
if ($("#chkOldBuildingOtherAreas").is(":checked"))
$("#txOldOtherAreas").show();
else
$("#txOldOtherAreas").hide();
});
$("#chkNewBuildingOtherAreas").change(function () {
if ($("#chkNewBuildingOtherAreas").is(":checked"))
$("#txNewOtherAreas").show();
else
$("#txNewOtherAreas").hide();
});
Code for removing check mark from other groups
$("input[name='oldBuilding']").change(function () {
if ($("input[name='newBuilding']:checked").length > 0) {
$("input[name='newBuilding']").removeAttr('checked');
$("#chkNewBuildingOtherAreas").trigger("change");
}
});
$("input[name='newBuilding']").change(function () {
if ($("input[name='oldBuilding']:checked").length > 0) {
$("input[name='oldBuilding']").removeAttr('checked');
$("#chkOldBuildingOtherAreas").trigger("change");
}
});
My jsfiddle
https://jsfiddle.net/milindsaraswala/wchrwjnx/
https://jsfiddle.net/1ny36nwL/4/
var groups = ['.oldGroup', '.newGroup'];
$(groups.join(',')).find('input[type=text]').hide();
function resetGroup(selector) {
//clear and hide texts
$('input[type=text]', selector).val('').hide();
//uncheck boxes
$('input[type=checkbox]', selector).removeAttr('checked');
}
$("input[name='oldBuilding']").change(function(e) {
if (this.id == 'chkOldBuildingOtherAreas') {
$("#txOldOtherAreas").toggle();
}
resetGroup('.newGroup');
});
$("input[name='newBuilding']").change(function(e) {
if (this.id == 'chkNewBuildingOtherAreas') {
$("#txNewOtherAreas").toggle();
}
resetGroup('.oldGroup');
});
as you can see I added groups var which can contain multiple groups (not only two), but code need to be changed a little more for that to work
you need to detect id/class of current group by something like $(this).closest('.form-group').id and reset every group except current group. in that way you can leave only one change function which will be universal
oh and you also need to add some class for checkbox that contain text input, and if that checkbox is clicked, trigger toggle for input. so it won't be if (this.id == 'chkNewBuildingOtherAreas') { but something like if ($(this).hasClass('has-input'))
Try replacing this in your code. It should work.
$("#txOldOtherAreas").hide();
$("#txNewOtherAreas").hide();
$("input[name='oldBuilding']").change(function (e) {
$("input[name='newBuilding']").removeAttr('checked');
e.target.checked = true;
if (e.target.id == "chkOldBuildingOtherAreas") {
$("#txOldOtherAreas").show();
$("#txNewOtherAreas").hide();
} else {
$("#txNewOtherAreas").hide();
}
});
$("input[name='newBuilding']").change(function (e) {
$("input[name='oldBuilding']").removeAttr('checked');
e.target.checked = true;
if (e.target.id == "chkNewBuildingOtherAreas") {
$("#txNewOtherAreas").show();
$("#txOldOtherAreas").hide();
} else {
$("#txOldOtherAreas").hide();
}
});
You can try following code to fix the problem (Tested in fiddle):
$('#txNewOtherAreas, #txOldOtherAreas').hide();
$('input[name="oldBuilding"]').on('click', function(){
if($('input[name="newBuilding"]').is(':checked')){
$('input[name="newBuilding"]').removeAttr('checked');
$('#txNewOtherAreas').hide();
}
});
$('input[name="newBuilding"]').on('click', function(){
if($('input[name="oldBuilding"]').is(':checked')){
$('input[name="oldBuilding"]').removeAttr('checked');
$('#txOldOtherAreas').hide();
}
});
$('#chkNewBuildingOtherAreas').on('click', function() {
if($(this).is(':checked')){
$('#txNewOtherAreas').show();
} else {
$('#txNewOtherAreas').hide();
}
});
$('#chkOldBuildingOtherAreas').on('click', function() {
if($(this).is(':checked')){
$('#txOldOtherAreas').show();
} else {
$('#txOldOtherAreas').hide();
}
});
I'm using ASP.NET MVC 4 to develop a web app. I have a page which contains a submit button which should be enabled only if one of my two checkboxes (or both of them) is (are) enabled. The thing is, I'm trying to add an "or" operator in the following script but it does not give me what I want. So, here's my script :
The jQuery sample
And this is the part I'd like to improve :
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
the_terms.click(function() {
if ($(this).is(":checked")){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
});
And I can't find a way to tell my document "Okay, if one of these 2 checkboxes (or both of them) is (are) checked, we can press on the button. If not, don't allow it".
Any idea guys?
It can be done with:
Fiddle
$('.checkbox').change(function(){
$('#submitBtn').prop('disabled', !$('.checkbox:checked').length > 0)
});
Note:
This find the checkboxes by class name checkbox so it will work with two checkboxes, whereas your original code is looking at a single checkbox via its ID.
Use the change event not click.
Simply use
$(".checkbox").click(function() {
$("#submitBtn").prop("disabled", !$('.checkbox:checked').length);
});
DEMO
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
$('.checkbox').change(function(){
$("#submitBtn").prop("disabled", !(the_terms.is(":checked") || the_terms2.is(":checked")));
});
});
// Make a function to be called on onload or on click
function checkTerm() {
jQuery('input[type="submit"]').attr('disabled',!jQuery('input.term:checked').length > 0 ) ;
}
// Call the function on load
$(document).ready(checkTerm) ;
// And call it on check change
jQuery(document).on('change','input.term',checkTerm) ;
Try below modified script , please check if it works as you want.
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
if(the_terms.is(":checked") || the_terms2.is(":checked"))
{
$("#submitBtn").removeAttr("disabled");
}
else
{
$("#submitBtn").attr("disabled", "disabled");
}
the_terms.click(function() {
if ($(this).is(":checked") || the_terms2.is(":checked")){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
the_terms2.click(function() {
if ($(this).is(":checked") || the_terms.is(":checked") ){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
});
I have 6 input fields and I need to make check and reset buttons active after all inputs were completed.Ill attach a fiddle and some code.
JSFiddle
$('.input').on('input', function() {
limit();
checkBtn.disabled = false;
resetBtn.disabled = false;
});
You could find empty inputs using a selector. If there are empty inputs, disable buttons; otherwise enable them.
$('.input').on('input', function() {
if($('input[value=""]').length) {
checkBtn.attr("disabled", "disabled");
resetBtn.attr("disabled", "disabled");
} else {
checkBtn.removeAttr('disabled');
resetBtn.removeAttr('disabled');
}
});
I am using Javascript to allow users to check all items in a form. However it is checking items even if they are disabled. Is there a way to make this only work on check boxes that are enabled?
<script>
$(document).ready(function () {
$('#selectall').on('click', function () {
$('.lv').prop('checked', isChecked('selectall'));
});
});
function isChecked(checkboxId) {
var id = '#' + checkboxId;
return $(id).is(":checked");
}
function resetSelectAll() {
// if all check box are selected, check the selectall checkbox
// and vice versa
if ($(".lv").length == $(".lv:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
if ($(".lv:checked").length > 0) {
$('#edit').attr("disabled", false);
} else {
$('#edit').attr("disabled", true);
}
}
</script>
You can combine the :not() and :disabled selectors:
$(".lv:not(:disabled)").prop("checked", isChecked("selectall"));
Im trying to make this function to check an element and if its checked, or not, add or remove respective className. Also, if the element is disabled but is checked, it should un-check it and remove the className('yes')
function init() {
$(document.body).select('input').each(function(element) {
if (!element.checked) {
element.up().removeClassName('yes');
} else {
element.up().addClassName('yes');
}
if (element.checked && element.disabled) {
element.checked = false;
element.up().removeClassName('yes')
}
});
}
Right now, the last part, is not working, no effect
Did you try element.checked = !element.checked in the last part instead of element.checked = false?