Develop Reference

select all on checkbox is not working using jquery

Clicking on select all of the checkbox only the particular page is selected .not selecting all pages. Here using jquery. Datatable contains 100s of pages and using that data graph plotting is performed. The data is dynamically loaded. Data in the data table is dynamically loaded.
$('#select-checkbox').on ('click', function (e) {
var rows = mytab.rows({'search': 'applied'}).nodes();
$('input[type="checkbox"]', rows).prop('checked', this.checked);
if (this.checked) {
var data = mytab.rows({'search': 'applied'}).data();
$('input[type="checkbox"]:checked',rows).map(function() {
var $row = $(this).closest('tr');
var rw=mytab.row($row).data();
var $td = $(this).closest('td');
var rd = mytab.cell($td).data();
mytab1.row.add(rw).draw();
Selected_Param_Link.push(rd);
});
} else {
mytab1.rows().remove().draw();
Selected_Param_Link = [];
}
});
// Handle click on checkbox to set state of "Select all" control
$('#hd1 tbody' || '#fv tbody').on('change', 'input[type="checkbox"]', function () {
// If checkbox is not checked
if (!this.checked) {
var el = $('#select-checkbox').get(0);
// If "Select all" control is checked and has 'indeterminate' property
if (el && el.checked && ('indeterminate' in el)) {
// Set visual state of "Select all" control
// as 'indeterminate'
el.indeterminate = true;
}
}
});

Try this
$(document).ready(function(){
function addOnHandler(elem){
elem.on ('click', function (e) {
let rows = mytab.rows({'search': 'applied'}).nodes();
$('input[type="checkbox"]', rows).prop('checked', this.checked);
if (this.checked) {
let data = mytab.rows({'search': 'applied'}).data();
$('input[type="checkbox"]:checked',rows).map(function() {
let $row = $(this).closest('tr');
let rw=mytab.row($row).data();
let $td = $(this).closest('td');
let rd = mytab.cell($td).data();
mytab1.row.add(rw).draw();
Selected_Param_Link.push(rd);
});
} else {
mytab1.rows().remove().draw();
Selected_Param_Link = [];
}
}//addOnHandler
// Handle click on checkbox to set state of "Select all" control
$('#hd1 tbody' || '#fv tbody').on('change', 'input[type="checkbox"]', function () {
// If checkbox is not checked
if (!this.checked) {
let el = $('#select-checkbox').get(0);
addOnHandler(el);
// If "Select all" control is checked and has 'indeterminate' property
if (el && el.checked && ('indeterminate' in el)) {
// Set visual state of "Select all" control
// as 'indeterminate'
el.indeterminate = true;
}
}
});
});

Changing required field dynamicly via JS in Contact Form 7

I need to write custom validated form in Wordpress. After the click on For-Author radio button some checkboxes group should be marked as not required. I tried to change "aria-required" attributes to "false" or remove and add class "wpcf7-validates-as-required" but it doesn't work. I also tried to reinit wpcf7 by
$('div.wpcf7 > form').wpcf7InitForm();
but it's also doesn't work.
This is a code sample:
$radio.button.click(function (event) {
isAuthor(event)
});
var isAuthor = function (event) {
if ($(event.target).attr('data-author') == 'true') {
authorClicked = true;
} else {
authorClicked = false;
}
fieldUpdate();
};
var fieldUpdate = function () {
var $text = $('[name=pres-title]');
if (authorClicked) {
$text.prop('disabled', false).attr('aria-required', true).addClass('wpcf7-validates-as-required').attr('aria-invalid', false)
$fieldRequired.each(function () {
$(this).prop('disabled', false).attr('aria-required', true).addClass('wpcf7-validates-as-required').attr('aria-invalid', false);
});
} else {
$text.prop('disabled', true).attr('aria-required', false).removeClass('wpcf7-validates-as-required').attr('aria-invalid', false);
$fieldRequired.each(function () {
$(this).prop('disabled', true).attr('aria-required', false).removeClass('wpcf7-validates-as-required').attr('aria-invalid', false);
});
}
}

Disable selected options between 5 selectlists with JQuery

I have 5 selectboxes in my HTML page and I'm trying to disable all the options in the other selectboxes that are already selected, they also have to be re-enabled when they are deselected.
So far I came to this result: Click here for JSFiddle
Using this JQuery
$('.poli').on('keyup change', function () {
$(this)
.siblings('select')
.children('option[value=' + this.value + ']')
.attr('disabled', true)
.siblings().removeAttr('disabled');
});
This however, doesn't work too well, It only selects and disables 1 option at the time...
Any solutions?

You could use:
DEMO
$('.poli').on('keyup change', function () {
var selectedValues = $('.poli').find('option:selected').map(function () {
return this.value ? this.value : null;
});
$('.poli').filter(function () {
return !this.value
}).find('option').each(function () {
$(this).prop('disabled', ~$.inArray(this.value, selectedValues));
});
});

I've updated the fiddle. You need to keep track of the selected options and disable those in the other select boxes:
$('.poli').on('keyup change', function () {
var selected = [];
$(".poli option:selected").each(function () {
if ($(this).val() !== "")
selected.push($(this).val());
});
$(".poli:not(this) option").each(function () {
if (selected.indexOf($(this).val()) > -1)
$(this).prop("disabled", true);
else
$(this).prop("disabled", false);
});
});

This cleans up the disable; I'm working on the enabling code will post in a minute:
$('select').change( function () {
$('select').each(function() {
$(this).siblings('select').children('option[value=' + this.value + ']').attr('disabled', true);
});
});

restricting user to check checkboxes based on my requirement

This is in addition to previous question
I've got a bunch of checkboxes in a table, I would like to restrict the user to check the checkboxes based on following rules.
If user is clicking any one of the checkbox in a particular row, the we have to make next two checkboxes checked programatically (jquery) and as well as uncheck (toggle).
There will be Block button/checkbox, if user is clicking block button then we have to disable all checkboxes in that row, except already checked.
We have restrict user to check checkbox, if there is no next two checkboxes available(i.e, unchecked). This is rule exception for last checkbox in a row (User can able to check last checkbox in a row).
Here i have managed with 1 and 2 rules, but for third rule i'm not getting any idea.
Jquery
$('.grp:checkbox').change(function () {
var obj = $(this).parent().nextAll("td").slice(0, 2);
if ($(this).is(":checked")) {
//$(this).removeClass('grp');
obj.find(":checkbox").prop('checked', true);
obj.find(":checkbox").prop('disabled', true);
} else {
obj.find(":checkbox").prop('checked', false);
obj.find(":checkbox").prop('disabled', false);
}
});
$('.block').change(function (e) {
var obj = $(this).parent().nextAll("td");
if ($(this).is(":checked")) {
obj.find(":checkbox").prop('checked', true).prop('disabled', true);
} else {
obj.find(":checkbox").prop('checked', false).prop('disabled', false);
}
});
Demo Fiddle
if anyone giving me any suggestions, it may help full for me.
Thanks in advance.

Finally i got my answer,
here i'm posting my answer, it my helpfull to someone.
Jquery
$('.adj :checkbox').change(function () {
//alert('1');
var obj = $(this).parent().nextAll("td").slice(0, 2);
if ($(this).is(":checked") && $(this).hasClass("grp")) {
//alert('2');
if (obj.find(".grp:checkbox").hasClass("grp")) {
var i = $(this).attr("id");
//alert(i);
$(this).addClass(i);
$(this).toggleClass('grp bkd');
obj.find(".grp:checkbox").prop('checked', true).addClass(i);
obj.find(".grp:checkbox").prop('disabled', true).toggleClass('grp bkd');
} else {
$(this).prop('checked', false);
}
} else {
var id = $(this).attr("id");
$(this).removeClass(id);
$(this).toggleClass('grp bkd');
obj.find("." + id + ":checkbox").prop('checked', false);
obj.find("." + id + ":checkbox").prop('disabled', false).toggleClass('grp bkd').removeClass(id);
}
});
$('.block').change(function (e) {
var obj = $(this).parent().nextAll("td");
if ($(this).is(":checked")) {
obj.find(".grp:checkbox").prop('checked', true).prop('disabled', true);
} else {
obj.find(".grp:checkbox").prop('checked', false).prop('disabled', false);
}
});
Working Fiddle

1) Create an empty array chked.
2) Iterate the obj to check whether it is checked or not using $.each()
$.each(obj, function (i, j) {
});
3) Push the value returned by each iteration.
chked.push($(j).find('input')[0].checked);
4) Using $.inArray(), check for any unchecked available
var isAvailable = $.inArray(false, chked);
this returns -1 is any of the 2 checkbox has value true otherwise 0
finally,
$('.grp:checkbox').change(function () {
var obj = $(this).parent().nextAll("td").slice(0, 2);
var chked = [];
$.each(obj, function (i, j) {
chked.push($(j).find('input')[0].checked);
});
var isAvailable = $.inArray(false, chked);
console.log(isAvailable);
if (chked.length != 0 && isAvailable == -1) {
return false;
} else {
if ($(this).is(":checked")) {
//$(this).removeClass('grp');
obj.find(":checkbox").prop('checked', true);
obj.find(":checkbox").prop('disabled', true);
} else {
obj.find(":checkbox").prop('checked', false);
obj.find(":checkbox").prop('disabled', false);
}
}
});
JSFiddle

Merging 4 similar click functions into one

Here are 4 functions I use to improve the usability of a table by:
If cell contains a checkbox and you click outside of a checkbox
The the tr contains data-url then the whole row is "clickable"
with CSS hover effect and redirects on click.
If the last column in the table contains a relative/absolute URL
then also redirects on click.
Check all checkboxes.
Here's my code:
// Click table cell auto check checkbox
$('table tr td').has("input[type=checkbox]").click(function(event) {
// Onl call this if click outside of the checkbox itself
if (event.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
});
// Table row click
$('table tr[data-url]').each(function(){
var url = $(this).attr("data-url");
if(url.length){
$(this)
.addClass("clickable")
.find("td").click(function(){
window.location = url;
return false;
});
}
});
// Double click row, open edit link
$('table:not(.noDoubleClick) tr td').dblclick(function(e) {
var linkEl = $(this).parents('tr').find('td:last-child a');
var linkElHref = linkEl.attr('href');
// Check if has href and http protocol
if(!linkElHref.length || linkEl.prop('protocol').indexOf("http") !== 0){
e.preventDefault();
return false;
}
if (linkElHref && linkEl.attr('onclick') === undefined && !linkEl.hasClass("popme")) {
document.location = linkElHref;
} else {
linkEl.click();
}
});
// Check all checkboxes
$('table input[type=checkbox][name^="checkall"]').live("click",function() {
var parent = $(this).parents('table');
if(!$(this).parents('table').length){
parent = $(this).parents("form");
}
parent.find(':checkbox[name^="' + $(this).attr("data-name") + '"]').prop("checked", this.checked);
});
Q: how can I modify this into one function so that jquery only has to search for tables once?
Example jsfiddle
Thanks for every bodies suggestions I have ended up taking a slightly different approach:
$('table').each(function(){
var $table= $(this), $cell, $row;
// TABLE ROWS
$table.find('tr').each(function(){
$row = $(this);
// Row click redirect to data-url
var url = $row.attr("data-url");
if(url && url.length){
$row.addClass("clickable").find("td").click(function(){
window.location = url;
return false;
});
}
// TABLE HEADING CELLS
$row.find('th, thead td').each(function(){
$cell = $(this);
// Check all checkboxes
$cell.find('input.checkall').live("click",function() {
var parent = $(this).parents('table');
if(!$(this).parents('table').length){
parent = $(this).parents("form");
}
parent.find(':checkbox[name^="' + $(this).attr("data-name") + '"]').prop("checked", this.checked);
});
});
// TABLE CELLS
$row.find('td').each(function(){
$cell = $(this);
// Check checbox onClick
if($cell.find("input[type=checkbox]")){
$cell.click(function(e) {
if(e.target.type !== 'checkbox') $(':checkbox', this).trigger('click');
});
}
// Double click open edit link
if(!$table.hasClass("noDoubleClick")){
$cell.dblclick(function(e){
var linkEl = $(this).parents('tr').find('td:last-child a');
var linkElHref = linkEl.attr('href');
// Check if has href and http protocol
if(linkElHref && (!linkElHref.length || linkEl.prop('protocol').indexOf("http") !== 0)){
e.preventDefault();
return false;
}
if (linkElHref && linkEl.attr('onclick') === undefined && !linkEl.hasClass("popme")) {
document.location = linkElHref;
} else {
linkEl.click();
}
});
}
}); // end CELLS
}); // end ROWS
}); // end TABLE

You should use .on , .live is being deprecated:
$(document).on('click', 'table tr td', function(event)
{
if( $(this).has("input[type=checkbox]"))
{
if (event.target.type !== 'checkbox')
$(':checkbox', this).trigger('click');
}
});
// Table row click
$(document).on('click', 'table tr[data-url] td', function(e)
{
var url = $(this).parent().attr("data-url");
if(url.length)
{
window.location = url;
return false;
}
});
$(document).on('dblclick', 'table:not(.noDoubleClick) tr td', function(e) {
debugger;
var linkEl = $(this).parents('tr').find('td:last-child a');
var linkElHref = linkEl.attr('href');
// Check if has href and http protocol
if(!linkElHref.length || linkEl.prop('protocol').indexOf("http") !== 0){
e.preventDefault();
return false;
}
if (linkElHref && linkEl.attr('onclick') === undefined && !linkEl.hasClass("popme")) {
document.location = linkElHref;
} else {
linkEl.click();
}
});
// Check all checkboxes
$(document).on('click', 'table input.checkall', function() {
var parent = $(this).parents('table');
if(!$(this).parents('table').length){
parent = $(this).parents("form");
}
parent.find(':checkbox[name^="' + $(this).attr("data-name") + '"]').prop("checked", this.checked);
});​

I have made the basic stubs here, i dont want to rewrite all your code.
$(document).ready(function(){
$('table').each(function(){
var table = $(this);
table.find('tr').each(function (){
var tr = $(this);
tr.find('td').each(function(){
var td = $(this);
td.has("input[type=checkbox]").click(function(event) {
// Only call this if click outside of the checkbox itself
if (event.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
});
});
});
});
});
​
The logic is: Find all tables, loop through all the tr's and then the td's. I've did your first function and hope that explains how it could be used?
​

The best thing to do in this case is to:
Get all of the tables in the page
Loop through each table
Find and apply logic to the individual elements as needed
$('table').each(function(){
var table = $(this),
rows = table.find('tr[data-url]'),
cells = table.find('td'),
all = table.find('input[type=checkbox][name^="checkall"]'),
edit = table.is('.noDoubleClick');
cells.each(function(){
//Apply your logic here
if(edit === true){
//Apply your logic to this cell here
}
});
rows.each(function(){
//Apply your logic to this row here
});
all.on('click',function(){
//Apply your logic here
});
});