I have a table and i am adding new rows by cloning the existing row. I want to put an alert over my whole table that if any field is left empty an alert should pop-up stating to fill that particular column.I have tried doing this but my alert is only applicable for the first row.Any help will be appreciated.Thanks.
$('#dataTable input:not([type=button]),#dataTable select').each(function () {
var l_search = $( "#fldsearch" ).val();
if( l_search === 'S' || l_search === "" )
{
alert('Please select from the drop down');
return false;
}
var l_desc = $( "#flddesc" ).val();
if( l_desc === "" )
{
alert('Please fill the description');
return false;
}
var l_img = $( "#fldimg" ).val();
if( l_img === "")
{
alert('Please fill the image path');
return false;
}
var l_url = $( "#fldurl" ).val();
if( l_url === "" )
{
alert('Please fill the url');
return false;
}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" name="dataTable" class="graphtable">
<thead>
<tr>
<td class="headingalign" width="16%">Links</td>
<td class="headingalign" width="32%">Desciption</td>
<td class="headingalign" width="16%">Image</td>
<td class="headingalign" width="16%">URL</td>
<td class="headingalign" width="05%"></td>
</tr>
</thead>
<tbody>
<tr id="id0" class="vals" name="id0">
<td>
<div class="id_100">
<select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField(this)">
<option value="S">Select</option>
<xsl:for-each select="faml/response/qlwidgetresponsedto/searchby/datamapdto">
<xsl:sort order="ascending" select="description" />
<option value="#{description}">
<xsl:value-of select="description" />
</option>
</xsl:for-each>
</select>
</div>
</td>
<td>
<input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext1" size="85" value="{//RESPONSE}" />
</td>
<td>
<input id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext2" size="45" value="{//RESPONSE}" />
</td>
<td>
<input id="fldurl" name="fldurl" maxlength="55" disabled="true" class="objinputtext3" size="40" value="{//RESPONSE}" />
</td>
<td>
<input tabindex="6" value="Delete Row" disabled="true" class="DeleteButton" type="button" />
</td>
</tr>
</tbody>
</table>
<div class="buttonarea">
<ul>
<li><input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" /></li>
<li><input tabindex="6" id="Button5" value="Initiate" class="buttons" name="Button5" type="button" onclick="return fnOnSubmit();" /></li>
</ul>
</div>
Related
I have a table and i am cloning rows to add a new row. My <td id> is also increasing. My problem is though the value of each <td id> is increasing when the value is passing from one screen to the next screen the <td id> will be like this
<flddesc>Val1<flddesc>
<flddesc>Val2<flddesc>
I have tried couple of things but no luck And now i have no idea why is it so. Since i am still learning jQuery and JS so please go easy on me. Any help or suggestion will be appreciated. Thanks
var regex = /^([a-zA-Z0-9 _-]+)$/;
var cindex = 0;
var counter = 0;
var quicklink = '';
$(document).on('click', '.Buttons', function(addrow) {
if (counter == '5') {
alert('Maximum limit reached');
return false;
}
var count = $('table tr:last input:text').filter((_, el) => el.value.trim() == "").length;
if (count || !$('.id_100 option[value=description]').attr('selected', 'selected')) {
{
alert("Please fill the current row");
return false;
}
}
var $tr = $('#dataTable tbody tr:last');
var $clone = $tr.clone(true);
$('.DeleteButton').prop('disabled', false);
cindex++;
$clone.find('input:text').val('').attr('disabled', true);
$clone.find('input:button').attr('disabled', true);
$clone.attr('id', 'id' + (cindex)); //update row id if required
//update ids of elements in row
$clone.find("*").each(function() {
var id = this.id || "";
if (id != "") {
var match = id.match(regex) || [];
if (match.length == 2) {
this.id = this.name + (cindex);
}
}
});
$tr.after($clone);
counter++;
});
function disableField(e)
{ var Count = $('#dataTable tr').length;
if (Count == 2){
$(e).closest('tr').find("input").not('.DeleteButton').prop('disabled', false);
}else{
$(e).closest('tr').find("input").prop('disabled', false);
}}
$(document).on("click", '.DeleteButton', function() {
$(this).closest("tr").remove();
counter--;
var Count1 = $('#dataTable tr').length;
if (Count1 == 2){
$('.DeleteButton').prop('disabled', true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" name="dataTable" class="graphtable">
<thead>
<tr>
<td class="headingalign" width="16%">Links</td>
<td class="headingalign" width="32%">Desciption</td>
<td class="headingalign" width="16%">Image</td>
<td class="headingalign" width="16%">URL</td>
<td class="headingalign" width="05%"></td>
</tr>
</thead>
<tbody>
<tr id="id0" class="vals" name="id0">
<td>
<div class="id_100">
<select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField(this)">
<option value="">Select</option>
<option value="L">Latest Offer</option>
<option value="G">Guides</option>
</select>
</div>
</td>
<td>
<input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext1" size="85" value="" />
</td>
<td>
<input id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext2" size="45" value="" />
</td>
<td>
<input id="fldurl" name="fldurl" maxlength="55" disabled="true" class="objinputtext3" size="40" value="" />
</td>
<td>
<input tabindex="6" value="Delete Row" disabled="true" class="DeleteButton" type="button" />
</td>
</tr>
</tbody>
</table>
<div class="buttonarea">
<ul>
<li><input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" /></li>
<li><input tabindex="6" id="Button5" value="Initiate" class="buttons" name="Button5" type="button" onclick="return fnOnSubmit();"/></li>
</ul>
</div>
I have created a table and added a button 'Add Row' which will clone the row of the table and append it with the previous row. I have put an alert for which if any of the fields is left empty then user should not be able to add a new row.It seems to be working when i hard-coded the drop down values. Now since I am fetching my drop down values from the local db it always shows alert("Please fill all the fields in the current row") after filling all the fields. Any suggestion will be appreciated. Thanks
```````````````````````jQuery``````````````````````````
var regex = /^([a-zA-Z0-9 _-]+)$/;
var cindex = 0;
$(document).on('click','.Buttons', function(e) {
var count = $('table tr:last input:text').filter((_,el) => el.value.trim() == "").length;
if(count || !$('select:last').val()){
alert("Please fill all the fields in the current row");
return false;
}
var $tr = $('#dataTable tbody tr:last');
var $clone = $tr.clone(true);
cindex++;
$clone.find(':input').not('select').not('.DeleteButton').val('').attr('disabled', true);
$clone.attr('id', 'id'+(cindex) ); //update row id if required
//update ids of elements in row
$clone.find("*").each(function() {
var id = this.id || "";
if(id != ""){
var match = id.match(regex) || [];
if (match.length == 2) {
this.id = this.name + (cindex);
}
}
});
$tr.after($clone);
});
HTML
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" class="graphtable">
<thead>
<tr>
<td class="headingalign" width="16%">Links</td>
<td class="headingalign" width="32%">Desciption</td>
<td class="headingalign" width="16%">Image</td>
<td class="headingalign" width="16%">URL</td>
<td class="headingalign" width="05%"></td>
</tr>
</thead>
<tbody>
<tr id="id01" name="row">
<td><select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField()" >
<option value="">Select</option>
<xsl:for-each select="{Values fetching from local db}">
<xsl:sort order="ascending" select="description"/>
<option value="{code}"> <xsl:value-of select="description"/> </option>
</xsl:for-each>
</select></td>
<td><input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext" size="85" value="{//RESPONSE}" /></td>
<td><input id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}" /></td>
<td><input id="fldurl" name="fldurl" maxlength="15" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}" /></td>
<td><input tabindex="6" value="Delete Row" disabled="true" class="DeleteButton" type="button" /></td>
</tr>
</tbody>
</table>
<div class="buttonarea">
<ul>
<li>
<input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" />
</li>
<li>
<input tabindex="6" id="Button5" value="Initiate" class="buttons" name="Button5" type="button" onClick="return fnOnSubmit();"/>
</li>
</ul>
</div>
I am adding rows to my table by cloning it. When the user clicks on the Delete Row button a checkbox should appear at the starting of every row which when selected remove that particular row.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" class="graphtable">
<thead>
<tr>
<td class="headingalign" width="16%">Links</td>
<td class="headingalign" width="32%">Desciption</td>
<td class="headingalign" width="16%">Image</td>
<td class="headingalign" width="16%">URL</td>
</tr>
</thead>
<tbody>
<tr id="id01" name="row">
<td>
<select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField()">
<option value="">Select</option>
<option value="GDS">Guides</option>
<option value="LOF">Latest Offers</option>
<option value="TEM">Templates</option>
<option value="VID">Videos</option>
</select>
</td>
<td>
<input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext" size="85" value="{//RESPONSE}" />
</td>
<td>
<input id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}" />
</td>
<td>
<input id="fldurl" name="fldurl" maxlength="15" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}" />
</td>
</tr>
</tbody>
</table>
<div class="buttonarea">
<ul>
<li><input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" /></li>
</ul>
<ul>
<li><input tabindex="6" id="Button4" value="Delete Row" class="delButtons" name="Button4" type="button" /></li>
</ul>
</div>
$("#dataTable").on('click', '.delButtons', function () {
var $tr = $('#dataTable tbody tr:last');
$tr.remove();
});
Any help will be appreciated. Thanks
You can try below code to add checkbox on click of delete button and remove row on click of newly added checkbox
$(function(){
$('.delButtons').on('click', function(){
$('#dataTable thead tr').each(function(){
if($(this).find('.removeBtnHeader').length==0) {
$(this).find('td:first').before('<td class="removeBtnHeader"></td>');
}
});
$('#dataTable tbody tr').each(function(){
if($(this).find('.removeBtn').length==0) {
$(this).find('td:first').before('<td><input type="checkbox" class="removeBtn"></td>');
}
});
});
$(document).on('click', '.removeBtn', function(){
$(this).closest('tr').remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" class="graphtable">
<thead>
<tr>
<td class="headingalign" width="16%">Links</td>
<td class="headingalign" width="32%">Desciption</td>
<td class="headingalign" width="16%">Image</td>
<td class="headingalign" width="16%">URL</td>
</tr>
</thead>
<tbody>
<tr id="id01" name="row">
<td>
<select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField()" >
<option value="">Select</option>
<option value="GDS">Guides</option>
<option value="LOF">Latest Offers</option>
<option value="TEM">Templates</option>
<option value="VID">Videos</option>
</select>
</td>
<td>
<input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext" size="85" value="{//RESPONSE}" />
</td>
<td>
<input id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}" />
</td>
<td>
<input id="fldurl" name="fldurl" maxlength="15" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}" />
</td>
</tr>
<tr id="id02" name="row">
<td>
<select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField()" >
<option value="">Select</option>
<option value="GDS">Guides</option>
<option value="LOF">Latest Offers</option>
<option value="TEM">Templates</option>
<option value="VID">Videos</option>
</select>
</td>
<td>
<input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext" size="85" value="{//RESPONSE}" />
</td>
<td>
<input id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}" />
</td>
<td>
<input id="fldurl" name="fldurl" maxlength="15" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}" />
</td>
</tr>
</tbody>
</table>
<div class="buttonarea">
<ul>
<li><input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" /></li>
</ul>
<ul>
<li><input tabindex="6" id="Button4" value="Delete Row" class="delButtons" name="Button4" type="button" /></li>
</ul>
</div>
I need to create a form where I can include an "Add Row" button. Clicking this button should create a new row, which should be same as my last row. My row contains some drop down values too, so I want them to be appear the same in the next row.
(Edit: So i am able to clone a row but the id of each row is also getting cloned which i want to be unique).
var regex = /^(.*)(\d)+$/i;
var cindex = 1;
$(document).on('click','.Buttons', function() {
var $tr = $('#dataTable tbody tr:first');
var $clone = $tr.clone(true);
cindex++;
$clone.find(':input').val('');
$clone.attr('id', 'id'+(cindex) ); //update row id if required
//update ids of elements in row
$clone.find("*").each(function() {
var id = this.id || "";
var match = id.match(regex) || [];
if (match.length == 3) {
this.id = match[1] + (cindex);
}
});
$tr.after($clone);
});
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" class="graphtable">
<tr>
<td class="headingalign" width="16%">Links</td>
<td class="headingalign" width="32%">Desciption</td>
<td class="headingalign" width="16%">Image</td>
<td class="headingalign" width="16%">URL</td>
</tr>
<tr id="row0" name="row">
<td>
<select title="" tabindex="1" id="fldtype" name="fldtype" class="objselect">
<option value="SEL" selected='true'>Select</option>
<option value="GDS">Guides</option>
<option value="LOF">Latest Offers</option>
<option value="TEM">Templates</option>
<option value="VID">Videos</option>
</select>
</td>
<td>
<input id="flddesc" name="flddesc" maxlength="500" class="objinputtext" size="85" value="{//RESPONSE}">
<xsl:attribute name="value"></xsl:attribute>
</input>
</td>
<td>
<input id="fldimg" name="fldimg" maxlength="15" class="objinputtext" size="35" value="{//RESPONSE}">
<xsl:attribute name="value"></xsl:attribute>
</input>
</td>
<td>
<input id="fldurl" name="fldurl" maxlength="15" class="objinputtext" size="35" value="{//RESPONSE}">
<xsl:attribute name="value"></xsl:attribute>
</input>
</td>
</tr>
</table>
</div>
<div class="bottompanel">
<ul>
<li></li>
</ul>
</div>
</span>
<div class="buttonarea">
<ul>
<li><input tabindex="6" id="Button3" onClick="fnAddMore ();" value="Add More" class="Buttons" name="Button3" type="button" /></li>
</ul>
</div>
The code you're using has several issues, such as using the deprecated delegate() instead of on(), and also trying to delegate the event to an element which is not a parent of the target.
To achieve what you require you can use clone() to create a new instance of the first tr in the table which you can then append(). Note that I separated the headings and content of the table with thead and tbody elements to make retrieval and insertion easier. Finally, note that input elements do not have a closing tag, and there are several mismatched </div> and </span> tags which I removed from the HTML.
$(document).on('click', '.Buttons', function() {
var $clone = $('#dataTable tbody tr:first').clone().appendTo('#dataTable tbody');
$clone.find(':input').val('');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" class="graphtable">
<thead>
<tr>
<td class="headingalign" width="16%">Links</td>
<td class="headingalign" width="32%">Desciption</td>
<td class="headingalign" width="16%">Image</td>
<td class="headingalign" width="16%">URL</td>
</tr>
</thead>
<tbody>
<tr id="row0" name="row">
<td>
<select title="" tabindex="1" id="fldtype" name="fldtype" class="objselect">
<option value="SEL" selected='true'>Select</option>
<option value="GDS">Guides</option>
<option value="LOF">Latest Offers</option>
<option value="TEM">Templates</option>
<option value="VID">Videos</option>
</select>
</td>
<td>
<input id="flddesc" name="flddesc" maxlength="500" class="objinputtext" size="85" value="{//RESPONSE}" />
<xsl:attribute name="value"></xsl:attribute>
</td>
<td>
<input id="fldimg" name="fldimg" maxlength="15" class="objinputtext" size="35" value="{//RESPONSE}" />
<xsl:attribute name="value"></xsl:attribute>
</td>
<td>
<input id="fldurl" name="fldurl" maxlength="15" class="objinputtext" size="35" value="{//RESPONSE}" />
<xsl:attribute name="value"></xsl:attribute>
</td>
</tr>
</tbody>
</table>
<div class="bottompanel">
<ul></ul>
</div>
<div class="buttonarea">
<ul>
<li><input tabindex="6" id="Button3" value="Add More" class="Buttons" name="Button3" type="button" /></li>
</ul>
</div>
I'm working on this table that has checkboxes for each row. Basically, I want all of the email input fields to be disabled once page loads. If the users clicks on the checkbox that belongs to a row then the email input field for that row should be enabled so the user can type in an email. Finally, if the user clicks on the Select all checkbox all of the input fields should be enabled/disabled. For some reason I can only disabled the first, second and last input field once page loads. My Select All checkbox is not working properly either :(. Can anyone tell me what I'm doing wrong please? Thanks in advance!
var users = $("tr")
.filter(function () {
return $(this).find('.inputEmail').val() !== "" && $(this).find(".input_checkbox").is(':checked');
})
.map(function () {
var $row = $(this);
return {
firstName: $row.find('.fullName').text(),
number: $row.find('.usersPhoneNumber').text(),
email: $row.find('.inputEmail').val()
}
})
.get();
console.log('Array containing all users with an email:');
console.log(users);
Here's my code - LIVE DEMO:
$(document).ready(function() {
$("#checkAll").change(function() {
$(".input_checkbox").prop('checked', $(this).prop("checked")).each(function() {
enable_disable_input(this);
var nameValue = $(this).attr("name");
var inputFieldNameValue = $.trim(nameValue);
var inputFieldString = "customer-name-inputField";
var inputFieldId = inputFieldNameValue + inputFieldString;
if ($(this).is(":checked")) {
enable_disable_input(this);
$("#" + inputFieldId).prop('placeholder', "Enter email address");
} else {
$("#" + inputFieldId).prop('placeholder', "");
enable_disable_input(this);
}
});
});
function enable_disable_input(checkbox) {
var input_id = checkbox.id.replace('-checkbox', '-inputField');
$("#" + input_id).prop('disabled', !checkbox.checked);
}
$(".input_checkbox").change(function() {
var nameValue = $(this).attr("name");
var inputFieldNameValue = $.trim(nameValue);
var inputFieldString = "customer-name-inputField";
var inputFieldId = inputFieldNameValue + inputFieldString;
if ($(this).is(":checked")) {
enable_disable_input(this);
$("#" + inputFieldId).prop('placeholder', "Enter email address");
} else {
$("#" + inputFieldId).prop('placeholder', "");
enable_disable_input(this);
}
});
$(".input_checkbox").each(function() {
enable_disable_input(this);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div style="width:1140px;">
<br/>
<table>
<div>
<tr>
<td align="center" valign="bottom">Select All
<br/>
<input type="checkbox" id="checkAll" value="" />
</td>
<td width="5"></td>
<td width="200" valign="bottom">Name</td>
<td align="center" class="table-col-phone" style="padding-left:20px;">Phone # / Extension</td>
<td width="50"></td>
<td valign="bottom" style="padding-left: 90px;">Email</td>
</tr>
<tr>
<td style="font-weight: bold;">Group1</td>
</tr>
<tr>
<td></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="0customer-name-checkbox" name="0 " value="">
</td>
<td class="fullName">Ben Morris</td>
<td align="left" class="usersPhoneNumber">3033422109</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="0" id="0customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td align="center"></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="1customer-name-checkbox" name="1 " value="">
</td>
<td class="fullName">Mike Jeff</td>
<td align="left" class="usersPhoneNumber">3037777777</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="1" id="1customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td style="font-weight: bold;">Group2</td>
</tr>
<tr>
<td></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="0customer-name-checkbox" name="0 " value="">
</td>
<td class="fullName">Ana McLwius</td>
<td align="left" class="usersPhoneNumber">3039899231</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="0" id="0customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td align="center"></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="1customer-name-checkbox" name="1 " value="">
</td>
<td class="fullName">Zumia Brown</td>
<td align="left" class="usersPhoneNumber">3033213453</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="1" id="1customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td style="font-weight: bold;">Group3</td>
</tr>
<tr>
<td></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="0customer-name-checkbox" name="0 " value="">
</td>
<td class="fullName">Bryan Smith</td>
<td align="left" class="usersPhoneNumber">3033222098</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="0" id="0customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td align="center"></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="1customer-name-checkbox" name="1 " value="">
</td>
<td class="fullName">Junior White</td>
<td align="left" class="usersPhoneNumber">3030098342</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="1" id="1customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td align="center"></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="2customer-name-checkbox" name="2 " value="">
</td>
<td class="fullName">Peter McDonald</td>
<td align="left" class="usersPhoneNumber">3037777777</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="2" id="2customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
</div>
</table>
<button id="submitButton" type="button" class="sign-in-button" style="text-align: center;margin-left: 428px;" value="Submit" />Submit</button>
</div>
You should search email input based on the current element. You are having duplicate ids.
try this:
$(this).closest('tr').find('input[type;"text"]').attr("disabled", !this.checkbox);
Updated Fiddle
Note I have taken leisure to update your code. Hope it helps!
Getting Data
You can try something like this:
Note I have updated Group label rows and have added class in it.
Updated Fiddle
$("#submitButton").on("click", function() {
var result = {};
var group_id = "";
$("table tr").each(function(index, row) {
var $row = $(row)
group_id = $row.hasClass("section-label") ? $row.find("td:first").text() : group_id;
if (group_id && $row.find(".input_checkbox").is(':checked') && $row.find('.inputEmail').val().trim() !== "") {
result[group_id] = result[group_id] || [];
result[group_id].push({
firstName: $row.find('.fullName').text(),
number: $row.find('.usersPhoneNumber').text(),
email: $row.find('.inputEmail').val()
});
}
});
console.log(result)
})
Obviously because of the duplicated ids.
try this:
function enable_disable_input(checkbox) {
$(checkbox).parents('tr').find('input[type="email"]').prop('disabled', !checkbox.checked);
}
Your code seems a little messy, something like this would work and it's more readable
$(document).ready(function () {
$("#checkAll").change(function () {
$(".input_checkbox").prop('checked', $(this).prop("checked")).each(function () {
var input = $(this).parent().parent().find("input[type='email']");
if ($(this).is(":checked")) {
$(input).prop('disabled', false);
$(input).prop('placeholder', "Enter email address");
}
else {
$(input).prop('placeholder', "");
$(input).prop('disabled', true);
}
});
});
$(".input_checkbox").change(function () {
var input = $(this).parent().parent().find("input[type='email']");
if ($(this).is(":checked")) {
$(input).prop('disabled', false);
$(input).prop('placeholder', "Enter email address");
}
else {
$(input).prop('placeholder', "");
$(input).prop('disabled', true);
}
});
$('.inputEmail').each(function(){
$(this).prop('disabled', true);
})
});
full working example
Also, you should remove the duplicated ID's.