Develop Reference

How to Enable All Rows if One Disable Row is Present jQuery

How do I enable all rows if one disabled row is present. I have a 2 kinds of buttons inside my table. First button, when you click it, it enables all the disabled buttons. The Second button, when you click it, it enables/disables the specific row it is assigned to.
HTML
<tr class="${fn:substring(monthInfo.month, 0, 3)}">
<c:if test="${stat.first}">
<td class="monthName" rowspan="6" value="${fn:substring(monthInfo.month, 0, 3)}">
<div class="vertical-text">
${fn:substring(monthInfo.month, 0, 3)}<br>
<img src="resources/images/edit.png" width="20%" href="#" />
</div>
</td>
</c:if>
<td><img class="editButt" src="resources/images/edit.png" href="#" /></td>
<td>${weekInfo.weekStart}</td>
<td>${weekInfo.weekEnd}</td>
<c:forEach items="${weekInfo.weeklyData}" var="week">
<td><input type="text" name="cell" class="hours" maxlength="2" value="${week}"></td>
</c:forEach>
<td class="weekTotal ibm-bgcolor-green-10 ">${weekInfo.totalHrs}</td>
<td class="holidayTotal">${weekInfo.totalHo}</td>
<td class="vacationTotal">${weekInfo.totalVl}</td>
<td class="sickTotal">${weekInfo.totalSl}</td>
<td><input type="text" name="cell" class="remarks" value="${weekInfo.remarks}"></td>
</tr>
jQuery
$('.editButt').click(function() {
$(this).closest('tr').find('input:text').prop('disabled', function(i, v) {
return !v;
});
});
$('.monthName').click(function() {
$("#test1table tbody tr").each(function() {
var className = $(this).closest('tr').find('td:first').text().trim();
var value = $('.' + className).find('input:text').is(':disabled');
if (!value) {
disableRows();
} else {
$('.' + className).find('input:text').prop('disabled', function(i, v) {
return !v;
});
}
});
});
What happens here is that if 2 rows are enabled. When I click the, the 1st button(.monthName). The 2 rows are enabled becomes disabled, and the disabled rows becomes enabled.
But I want is when I click the 1st Button. Regardless of there attribute, all rows will be enabled.

But I want is when I click the 1st Button. Regardless of there attribute, all rows will be enabled.
Enable all button
$("#enable-all").click(function(e) {
$("table").removeClass("disabled");
$("tbody tr").removeClass("danger");
$("table input, table button").prop("disabled", false);
});
Disable all button
$("#disable-all").click(function(e) {
$("table").addClass("disabled");
$("tbody tr").addClass("danger");
$("table input, table button").prop("disabled", true);
});
or a toggle button
$("#toggle").click(function(e) {
$("table").toggleClass("disabled");
$("tbody tr").toggleClass("danger");
var isDisabled = $("table").hasClass("disabled");
if (isDisabled) {
$("table input, table button").prop("disabled", true);
} else {
$("table input, table button").prop("disabled", false);
}
});
jsfiddle

conditionally hide input in table

I am trying to have a select input with an other option when the other option is selected the input should become visible, however I want it defaulted as hidden and it should rehide if select is changed again later. I have tried == and literal === and reversing the hide show commands with != without change
currently I have
HTML:
<tr>
<td colspan="3" align="center" border="1">Certification:</td>
<td colspan="3" align="center" border="1">
<select name="certname" id="certname">
<option value=""> </option>
<option value="State">State</option>
<option value="Other">Other</option>
</select>
<input type="text" id="othercert" name="othercert" />
</td>
</tr>
and JS:
$("#othercert").hide();
$(document).ready(function () {
$("#certname select").change(function (e) {
if ($(this).val() != "Other") {
$("#othercert").hide();
}
else {
$("#othercert").show();
}
});
});
I am unsure where to go from here or what is going wrong - any assistance is appreciated.

Your selector thinks select is the child to #certname rather than its id. It should be:
select#certname and not #certname select
JS Fiddle
$("#othercert").hide();
$(document).ready(function () {
$("select#certname").change(function (e) {
if ($(this).val() != "Other") {
$("#othercert").hide();
} else {
$("#othercert").show();
}
});
});

Your change selector is wrong. The select isn't a child of #certname, therefore change to the following:
$("select#certname").change(function (e) {
http://jsfiddle.net/ndgadeb1/
Also you need to put your initial hide inside the document ready function:
$(document).ready(function () {
$("#othercert").hide();
However if you wish to hide on page load then you can just do this in CSS:
#othercert{
display:none;
}
That way it won't flash on page load.

when option selected do stuff ( btw, all the elments have dynamic id)

I searched for similar questions, I found some but their solution did't help me.
For example:
First question
Second question
My problem is:
I have a table that the user can add rows dynamically, so I am creating a unique id for each row and all elements inside as well.
each row have two text fields and select with two options, and when you select one of the option the text feild should be dislpay:block and the second will be display: "none", depending on your choice.
I built here some example that will shows the general structure (JSFiddle)
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>
<input id="description-first-1" name="description-first-1" type="text" placeholder = "first">
<input id="description-second-1" name="description-second-2" type="text" placeholder = "second">
<select id="select-1">
<option>
<option id="first-opt-1">1</option>
<option id="second-opt-1">2</option>
</option>
</select>
</td>
</tr>
<tr>
<td>
<input id="description-first-2" name="description-first-1" type="text" placeholder = "first">
<input id="description-second-2" name="description-second-2" type="text" placeholder = "second">
<select id="select-2">
<option>
<option id="first-opt-2">1</option>
<option id="second-opt-2">2</option>
</option>
</select>
</td>
</tr>
$(function() {
$("#select-1").change(function() {
if ($("#first-opt-1").is(":selected")) {
$("#description-first-1").show();
$("#description-second-1").hide();
} else {
$("#description-first-1").hide();
$("#description-second-2").show();
}
}).trigger('change');
});
http://jsfiddle.net/8vz121rq/9/
In my example for that matter you can seen that there are only 2 rows but it can also be 10 rows with different id's.
How to get jquery identify which row and all the elements inside of it i'm changing if the id's of all elements is dynamic ?

First of all, you need event delegation as the rows are dynamically generated, such as:
$("table").on("change", "[id^='select']", function() {
// do your stuf
});
Or in your case:
$("table").on("change", "#select-1", function() {
// do your stuf
});
So, is this what you needed?
$(function() {
$("table").on("change", "[id^='select']", function() {
var $this = $(this);
var $row = $this.closest("tr");
var ID = this.id.replace(/^[^\-]+\-(\d+)$/gi, '$1');
var sIndex = $this.prop('selectedIndex');
var part = sIndex === 2 ? "second" : "first";
if (!sIndex) {
$row.find("input").show();
return;
}
$row.find("input").hide();
$row.find("#description-" + part + "-" + ID).show();
});
});
Demo#Fiddle
P.S. The above is purely based on your markup and ID structure!

jQuery dynamically select checkbox group onChange

I have a dynamic set of rows with a dropdown and checkboxes in each and need to select all checkboxes onChange if a certain option value is selected.
This works fine for one group but when there's multiple rows and the option value is selected from one row, the onChange is triggering to select all checkboxes from all rows instead of that specific row.
I setup a fiddle to clarify what I mean - pretty sure i need to somehow get a counter of rows and pass in that counter number in the onChange so it doesn't select all checkboxes and only the row the dropdown being changed is in.
http://jsfiddle.net/7brzct64/
<table>
<tr>
<td>
<!--First row eventRegistrations[1]-->
<select name="eventRegistrations[1].eventRegistrationStatusTypeID" id="registrationStatusSelect">
<option value="1">Pending</option>
<option value="2">Attended</option>
</select>
</td>
<td>
<input type="checkbox" name="eventRegistrations[1].markAttendance[1].attendanceDate" value="1">9/21/14
<input type="checkbox" name="eventRegistrations[1].markAttendance[2].attendanceDate" value="2">9/22/14</td>
</tr>
<!--There could be multiple dynamic rows whose input names increment like eventRegistrations[i]-->
<tr>
<td>
<!--Next dynamic row eventRegistrations[2]-->
<select name="eventRegistrations[2].eventRegistrationStatusTypeID" id="registrationStatusSelect">
<option value="1">Pending</option>
<option value="2">Attended</option>
</select>
</td>
<td>
<input type="checkbox" name="eventRegistrations[2].markAttendance[1].attendanceDate" value="1">10/23/14
<input type="checkbox" name="eventRegistrations[2].markAttendance[2].attendanceDate" value="2">10/24/14</td>
</tr>
Works fine for first dropdown changed to "Attended" if I hardcode 1 in eventRegistrations[1].
I think need a counter to get each row somehow, loop or do an each() and pass in the couner number based on which dropdown is selected be eventRegistrations[i] based on which is selected
$("select[name^='eventRegistrations[1]']").change(function () {
if ($(this).val() === '2') {
$("input[name^='eventRegistrations[1]']").prop('checked', true);
/*
var regCount = $(":input[name^='eventRegistrations[i]']").length
for (i = 1; i <= regCount; i++) {
$("input[name^='eventRegistrations[i]']").prop('checked', true);
}*/
}
});
Thanks for the help!

You can bind the change function to all selects. Then you can check which one was used and get the starting string which is identical with the start of the check boxes. Just like this:
$("select").change(function () {
if ($(this).val() === '2') {
var start = $(this).attr("name").split(".")[0];
$("input[name^='" + start + ".markAttendance']").prop('checked', true);
}
});
http://jsfiddle.net/7brzct64/2/

Once button is click the dropdown will reset

I have this script:
$(function () {
/* function for dynamic numbering */
function updateRowOrder() {
$('td.id').each(function (i) {
$(this).text(i + 1);
});
}
/* if input textValue get press keyboard enter */
$("#textValue").keydown(function (e) {
if (e.keyCode == 13) {
/* if get so trigger to addBtn */
$("#addBtn").trigger("click");
$(this).val("");
}
});
$(document).on("click", "#addBtn, .delRow ", function (e) {
/* if document clicked is addBtn */
if ($(this).is("#addBtn")) {
/* Append template script to table tbody */
$($("#template").html()).appendTo("#dataTables-example tbody");
/* Append textValue value to class rowValue and change classname */
$(".rowValue").append($("#textValue").val()).attr("class", "rowValues");
$(".taskValue").append($("#task").val()).attr("class", "taskValues");
$(".roleValue").append($("#role").val()).attr("class", "roleValues");
var appendComma = ($(".roleValue1").val() == '') ? '' : ' , ';
$(".roleValue1").append(appendComma + $("#id_select").val()).attr("class", "roleValues");
/* Update Numbering */
updateRowOrder();
}
else {
/* Just remove the tr on the click of a mouse */
$(this).closest("tr").remove();
/* Update Numbering */
updateRowOrder();
}
$('.up, .down').click(function(e){
e.preventDefault();
var row = $(this).parents("tr:first");
//selects all of row's tds except position number
// var row = $(this).parents("tr:first");
// selects the entire row
if ($(this).is(".up")) {
row.insertBefore(row.prev());
}
else if ($(this).is(".down")){
row.insertAfter(row.next());
}
else{
}
$('tbody tr[class="move"] td:first-child').each(function(idx, item) {
$(this).text(idx+1);
});
});
/* clearing input textValue */
$("#textValue").val("");
$('select option').filter(function(i){ return this.hasAttribute('selected') }).prop('selected', 'selected');
});
});
I include here that when addBtn click the drop down o select tag will reset into its default value.
This code:
$('select option').filter(function(i){ return this.hasAttribute('selected') }).prop('selected', 'selected');
And this is my sample table:
<table class="table table-bordered" id="dataTables-example">
<thead>
<tr>
<td>Activity</td>
<td><input type="text" id="textValue" class="typeahead form-control"/></td>
</tr>
<tr>
<td>Task Code</td>
<td>
<select name="" id="task" class="selectpicker form-control">
<option value="default" disabled="disabled" selected="selected">Default</option>
<?php
foreach($tasktype as $task)
{
?>
<option value="<?=$task['TaskCode']?>"><?=$task['TaskCode']?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td>Primary Role Code</td>
<td>
<select name="" id="role" class="selectpicker form-control">
<option value=""></option>
<?php
foreach($rolecode as $role)
{
?>
<option value="<?=$role['RoleName']?>"><?=$role['RoleName']?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td>Secondary Role Code</td>
<td>
<select id="id_select" class="selectpicker form-control" multiple data-live-search="true">
<?php
foreach($rolecode as $role)
{
?>
<option value="<?=$role['RoleName']?>"><?=$role['RoleName']?></option>
<?php
}
?>
</select>
</td>
</tr>
</thead>
</table>
<button type="button" class="btn btn-primary" id="addBtn"><i class="fa fa-plus fa-fw"></i>Add</button>
When I try it, I select values then click the Add button but still it not reset but instead it display the one I selected. And when I add again without choosing anything in the drop down, the value is null or no value.
I think it is working at the back-end but not working on the one I display.
Anyone tell me what is the problem?

Set the value on the select, not the selected property on the option.

function displaymessage() {
$("select").each(function() { this.selectedIndex = 0 });}
This Will reset the drop down value to index number 0.