We Keep Coding

Disable a select box based on the input of another select box

I'm wanting to disable one select box when the other select box == 1 and visa versa. I know how to do this with IDs, but where this gets tricky is that the IDs and names of the select boxes that I'm trying to target are getting dynamically generated by php. So I need to be able to target the select elements without using the unique, numeric number inside of it. I've tried a few things before this such as the ":contains" or ":input" selector to narrow it down by tr but to no avail so I resulted to using wildcards but I'm still not able to get it working. I'm fairly new to jQuery so it's probably just a simple syntax error.
var update_tickets = function() {
if ($("select[id$='Online']").selectedIndex == "1") {
$("select[id$='On-site']").prop('disabled', true);
} else if ($("select[id$='On-site']").selectedIndex == "1") {
$("select[id$='Online']").prop('disabled', true);
} else {
$("select[id$='Online']").prop('disabled', false);
$("select[id$='On-site']").prop('disabled', false);
}
};
$(update_tickets);
$("select[id$='On-site']").change(update_tickets);
$("select[id$='Online']").change(update_tickets);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="em-tickets fusion-table table-1 table" cellspacing="0" cellpadding="0">
<tr>
<th class="em-bookings-ticket-table-type">Location</th>
<th class="em-bookings-ticket-table-price">Price</th>
<th class="em-bookings-ticket-table-spaces">Spaces</th>
</tr>
<tr class="em-ticket" id="em-ticket-14">
<td class="em-bookings-ticket-table-type">On-site Enrollment</td>
<td class="em-bookings-ticket-table-price">$50.00</td>
<td class="em-bookings-ticket-table-spaces boyyyyyyy">
<select name="em_tickets[14][spaces]" class="em-ticket-selection" id="em-ticket-spaces-14-On-site">
<option>0</option>
<option>1</option>
</select>
</td>
</tr>
<tr class="em-ticket" id="em-ticket-16">
<td class="em-bookings-ticket-table-type">Online registration</td>
<td class="em-bookings-ticket-table-price">$50.00</td>
<td class="em-bookings-ticket-table-spaces boyyyyyyy">
<select name="em_tickets[16][spaces]" class="em-ticket-selection" id="em-ticket-spaces-16-Online">
<option>0</option>
<option>1</option>
</select>
</td>
</tr>
</table>

You were trying to use selectedIndex to get the value of your select elements, but that's vanilla JS which works on DOM nodes, not jQuery selectors, and doesn't return a string (just the index). (The proper way to access that would be $('select')[0].selectedIndex.)
Instead, use .val() to return the string value of an input/select element using jQuery.
Here's a fixed demo:
var update_tickets = function() {
if ($("select[id$='Online']").val() == "1") {
$("select[id$='On-site']").prop('disabled', true);
} else if ($("select[id$='On-site']").val() == "1") {
$("select[id$='Online']").prop('disabled', true);
} else {
$("select[id$='Online']").prop('disabled', false);
$("select[id$='On-site']").prop('disabled', false);
}
};
$(update_tickets);
$("select[id$='On-site']").change(update_tickets);
$("select[id$='Online']").change(update_tickets);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="em-tickets fusion-table table-1 table" cellspacing="0" cellpadding="0">
<tr>
<th class="em-bookings-ticket-table-type">Location</th>
<th class="em-bookings-ticket-table-price">Price</th>
<th class="em-bookings-ticket-table-spaces">Spaces</th>
</tr>
<tr class="em-ticket" id="em-ticket-14">
<td class="em-bookings-ticket-table-type">On-site Enrollment</td>
<td class="em-bookings-ticket-table-price">$50.00</td>
<td class="em-bookings-ticket-table-spaces boyyyyyyy">
<select name="em_tickets[14][spaces]" class="em-ticket-selection" id="em-ticket-spaces-14-On-site">
<option>0</option>
<option>1</option>
</select>
</td>
</tr>
<tr class="em-ticket" id="em-ticket-16">
<td class="em-bookings-ticket-table-type">Online registration</td>
<td class="em-bookings-ticket-table-price">$50.00</td>
<td class="em-bookings-ticket-table-spaces boyyyyyyy">
<select name="em_tickets[16][spaces]" class="em-ticket-selection" id="em-ticket-spaces-16-Online">
<option>0</option>
<option>1</option>
</select>
</td>
</tr>
</table>

Try this:
$('body').on('change', 'select[id$="On-site"]', update_tickets);
$('body').on('change', 'select[id$="Online"]', update_tickets);

jQuery/javascript add and remove classes on change

I am trying to create an change event so when a user selects an option from a dropdown, the corresponding row in the table is highlighted (via adding a class).
I have tried two things.. jQuery and javascript.
Here is my jQuery:
$("#phoneType").change(function() {
if (document.getElementById("optionSelect").value == 2) {
var selectedStatus = parseInt(document.getElementById("optionSelect").value);
$('.clickable-row').removeClass("cra-children-item-selected");
$(this).addClass('cra-children-item-selected');
}
});
Note that I am using javascript for the first two lines because I kept getting "val() is not a function" errors.
I tried using javascript to simply add/remove classes, but it doesn't seem to like my syntax...
document.getElementsByClassName("clickable-row").className = "clickable-row";
document.getElementById(selectedStatus).className = "clickable-row item-selected");
What I don't understand is why the jQuery isn't working... I have another function that works perfectly:
$(".clickable-row").click(function(event) {
console.log($(this).attr('id'));
$('.clickable-row').removeClass("item-selected");
$(this).addClass('item-selected');
});
Why is the code above (on click) working, but not my on change function?
Here is HTML:
<table class="table table-striped table-bordered">
<tr>
<th scope="col">Type</th>
<th scope="col">Number</th>
</tr>
<tr id="1" class="clickable-row">
<td>
Work
</td>
<td>
705-556-6677
</td>
</tr>
<tr id="6" class="clickable-row">
<td>
Cellular phone
</td>
<td>
613-444-7777
</td>
</tr>
</table>
<select name="phoneType" id="phoneType">
<option value="-1">Select</option>
<option value="3">Home</option>
<option value="1">Work</option>
<option value="6">Cellular phone</option>
</select>

Check this, it's actually working.
$("#phoneType").change(function() {
var val = $(this).val();
$("tr").removeClass("selected");
$("#tr" + val).addClass("selected");
})
.selected {border: solid 1px #000; background-color:blue;};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<th scope="col">Type</th>
<th scope="col">Number</th>
</tr>
<tr id="tr1" class="clickable-row">
<td>
Work
</td>
<td>
705-556-6677
</td>
</tr>
<tr id="tr6" class="clickable-row">
<td>
Cellular phone
</td>
<td>
613-444-7777
</td>
</tr>
</table>
<select name="phoneType" id="phoneType">
<option value="-1">Select</option>
<option value="3">Home</option>
<option value="1">Work</option>
<option value="6">Cellular phone</option>
</select>

Based on the HTML you presented, it seems the conditional is never true:
if (document.getElementById("optionSelect").value == 2) {
and should be rewritten referring to the select element for an option value that actually exists
$("#phoneType").change(function() {
var t = $(this),
tVal = t.val();
if (tVal === '3') {
console.log(tVal);
}
});

I would highly recommend you don't try to use id="1" as your row IDs. Use HTML5 data attributes instead:
<tr class="clickable-row" data-id="6">
Then simple jQuery which will select the row:
$("#phoneType").change(function() {
var id = parseInt($(this).val());
var $row = $('.clickable-row[data-id="' + id + '"]');
$('.clickable-row').removeClass("cra-children-item-selected");
if (id > 0) {
$row.addClass('cra-children-item-selected');
}
});

remove link when checkbox is checked

I have a table with Datatable plugin, and I did the part when the user clicks on the row (tr) that he will be redirected to that link. but i don't want the user to be redirected to the link when he clicks the checkbox on the row.
Here is the html:
<tr class="odd gradeX">
<td class="number_elem_lang">
<label class='with-square-checkbox2-mylist-details'>
<input type='checkbox'>
<span></span>
</label>
</td>
<td class=""> ID022ox</td>
<td class="list-name">First Lipsum List</td>
<td class=""> 22 Candidates</td>
<td class="">01 Apr 2016</td>
<td></td>
</tr>
Here is my javascript code for redirecting the user to the link when it's clicked:
$('#sample_1').on( 'click', 'tr', function() {
var $a = $(this).find('a').last();
if ( $a.length )
window.location = $a.attr('href');
} );
So i don't want to redirect the user when the checkbox is clicked, pls help :)
Thank you

You can use e.target to check what element the user clicked on. In the example below, we check if the user clicked on an input of type checkbox. Then we don't run the rest of the function.
$('table').on( 'click', 'tr', function(e) {
var target = $(e.target);
debugger; // For debugging purposes.
if (target.is('input[type=checkbox]')) {
// Do not continue if it's an input
console.log('no redirect');
return true;
}
console.log('do redirect');
var $a = $(this).find('a').last();
if ( $a.length )
window.location = $a.attr('href');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="odd gradeX">
<td class="number_elem_lang">
<label class='with-square-checkbox2-mylist-details'>
<input type='checkbox'>
<span></span>
</label>
</td>
<td class=""> ID022ox</td>
<td class="list-name">First Lipsum List</td>
<td class=""> 22 Candidates</td>
<td class="">01 Apr 2016</td>
<td></td>
</tr>
</table>
Update:
In this particular case the checkbox had some custom styling, which led to e.target being a span. The solution is to change the condition to $(e.target).is('span'), or even better set a class on the span and use $(e.target).hasClass('my-custom-checkbox').

Here you go - Add this to cancel the event when the checkbox is clicked:
$("tr input:checkbox").click(function(event) {
event.stopPropagation();
// Do something
});
Here is a working Demo
$('table').on('click', 'tr', function() {
var $a = $(this).find('a').last();
if ($a.length)
alert("fsfsd");
});
$("tr input:checkbox").click(function(event) {
event.stopPropagation();
// Do something
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="odd gradeX">
<td class="number_elem_lang">
<label class='with-square-checkbox2-mylist-details'>
<input type='checkbox'>
<span></span>
</label>
</td>
<td class="">ID022ox</td>
<td class="list-name">First Lipsum List</td>
<td class="">22 Candidates</td>
<td class="">01 Apr 2016</td>
<td>
</td>
</tr>
</table>

Use the if construction
if ($('input.checkbox_check').is(':checked')) {
...
}

Add a class named yourradio in your radio button and add this javascript
<label class='with-square-checkbox2-mylist-details'>
<input type='checkbox' class="yourradio">
<span></span>
</label>
<script>
$('.yourradio').on('click', function(){
return false;
});

Disable checkboxes that contain different attribute

I am trying to disable checkboxes that have different warehouse locations once a warehouse is selected. For example, if I check California I want to disable all the checkboxes that are from other states. I am trying to do it based on the attribute whseID but I can't figure out how to have jquery make that distinction between that attribute. Sometimes I will ship multiple items from 1 warehouse. So when I check 1 checkbox in California I need the other one in California to remain enabled but I need Washington and Arizona disabled.
<table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr class="grdnt">
<th style="color:black;">Checkbox</th>
<th style="color:black;border-left:1px solid;">Warehouse</th>
<th style="color:black;border-left:1px solid;">Item</th>
</tr>
<tr id="transferDetailCol">
<td>
<input type="checkbox" class="tfrCheck" name="tfrCheck[]" whseID="CA" />
</td>
<td class="Whse">California</td>
<td class="Item">J29458</td>
</tr>
<tr id="transferDetailCol">
<td>
<input type="checkbox" class="tfrCheck" name="tfrCheck[]" whseID="CA" />
</td>
<td class="Whse">California</td>
<td class="Item">J29478</td>
</tr>
<tr id="transferDetailCol">
<td>
<input type="checkbox" class="tfrCheck" name="tfrCheck[]" whseID="WA" />
</td>
<td class="Whse">Washington</td>
<td class="Item">J29478</td>
</tr>
<tr id="transferDetailCol">
<td>
<input type="checkbox" class="tfrCheck" name="tfrCheck[]" whseID="AZ" />
</td>
<td class="Whse">Arizona</td>
<td class="Item">J29478</td>
</tr>
</table>
$(document).on('click', '.tfrCheck', function () {
var allCheckBox = $(".tfrCheck");
var count_checked = allCheckBox.filter(":checked").length;
var whseID = $(this).attr('whseID');
if (count_checked >= 1) {
$(".tfrCheck:contains(whseID)").attr('disabled', 'disabled');
//$(".tfrCheck:not(:checked)").attr('disabled','disabled');
} else {
$(".tfrCheck").removeAttr('disabled');
}
});
JSFIDDLE

Ragnar's answer is close, but since you want OTHER states to be disabled, use
$('.tfrCheck:not([whseID='+ whseID +'])').attr('disabled', 'disabled');

Try using this line:
$('.tfrCheck:not([whseID='+ whseID +'])').attr('disabled', 'disabled');

The "attribute not equal selector" should help:
allCheckBox.filter('[whseID!="' + whseID + '"]').attr('disabled', true);
http://jsfiddle.net/oxkeL7jm/4/

Javascript Hide Column by Default

After browsing online for tutorials on Javascript show/hide I could only find examples on where all the columns were by default visible. I'm looking for a way to have some columns hidden by default (and allow them to be toggled on via a checkbox) and to have some columns shown by default (and allow them to be toggled off via a checkbox).
Is this possible?
For reference my table structure is as follows:
<table>
<thead>
<tr>
<th>Name</th>
<th>Job</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mike</td>
<td>Dancer</td>
</tr>
</tbody>
</table>

Pure javascript:
HTML
<input type="checkbox" onclick="showhide(1, this)" checked="checked" /> Name<br />
<input type="checkbox" onclick="showhide(3, this)" checked="checked" /> Job<br />
JS
function showhide(column, elem){
if (elem.checked)
dp = "table-cell";
else
dp = "none";
tds = document.getElementsByTagName('tr');
for (i=0; i<tds.length; i++)
tds[i].childNodes[column].style.display = dp;
}
Pure JS fiddle example
Please consider using a javascript library as JQuery for such trivial things. You code could be as simple as:
​
HTML
<input type="checkbox" data-col="1" checked="checked" /> Name<br />
<input type="checkbox" data-col="2" checked="checked" /> Job<br />
jQuery JS:
$(function(){
$(':checkbox').on('change', function(){
$('th, td', 'tr').filter(':nth-child(' + $(this).data('col') + ')').toggle();
});
});
jQuery Fiddle example

Here's the toggle function (using jQuery):
function toggleColumns(column, state) {
var cells = $("table").find("th, td").filter(":nth-child(" + column + ")");
if (state)
cells.hide();
else
cells.show();
}
If you need that column hidden by default, you can call this function during onLoad.
Example http://jsfiddle.net/nynEd/

in your css you should have something like
.hidden{
display:none;
}
.shown{
display:block;
}
then in your html you should have something like
<table>
<thead>
<tr>
<th id="th1" class="shown">Name</th>
<th id="th2" class="shown">Job</th>
</tr>
</thead>
<tbody>
<tr>
<td id="td1" class="shown">Mike</td>
<td id="td2" class="shown">Dancer</td>
</tr>
</tbody>
</table>
you then have to implement a togle method that will change the visibility of the column
//id should be passhed as 1, 2, 3 so on...
function togleTable(id){
if(document.getElementById("th"+id).className == "shown"){
document.getElementById("th"+id).className = "hidden";
}
if(document.getElementById("td"+id).className == "shown"){
document.getElementById("td"+id).className = "hidden";
}
if(document.getElementById("th"+id).className == "hidden"){
document.getElementById("th"+id).className = "shown";
}
if(document.getElementById("td"+id).className == "hidden"){
document.getElementById("td"+id).className = "shown";
}
}
and then in the compobox onChange() event you should call the togleTable function passing as id the number of the row you want to show/hide
this is a good place to start i think.
Have fun
UPDATED
if you want to have more than one class for your rows dont forget you can also use this:
document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

There are many way out for this my option is using basic jquery functions like,
<input type="checkbox" id="opt1" checked/>col 1
<input type="checkbox" id="opt2"/>col 2
<table border="1" cellpadding="5">
<thead>
<tr>
<th>Name</th>
<th>Job</th>
<th id="col1">col 1</th>
<th id="col2">col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mike</td>
<td>Dancer</td>
<td class="data1">data 1</td>
<td class="data2">data 2</td>
</tr>
</tbody>
</table>​
This is your HTML code,
$(document).ready(function() {
if($("#opt1").is(":checked")){
$("#col1").show();
$(".data1").show();
}else{
$("#col1").hide();
$(".data1").hide();
}
if($("#opt2").is(":checked")){
$("#col2").show();
$(".data2").show();
}else{
$("#col2").hide();
$(".data2").hide();
}
$("#opt1").live('click', function() {
if($("#opt1").is(":checked")){
$("#col1").show();
$(".data1").show();
}else{
$("#col1").hide();
$(".data1").hide();
}
});
$("#opt2").live('click', function() {
if($("#opt2").is(":checked")){
$("#col2").show();
$(".data2").show();
}else{
$("#col2").hide();
$(".data2").hide();
}
});
});​
This is a java-script code.
Please find working example

The columns which you want to hide should have attribute style="display:none" initially