I'm using textboxes to store certain values, but only if a corresponding checkbox is clicked. Otherwise the textboxes are disabled. The textboxes and the checkboxes are dynamically generated. So, I've used the on method. The text boxes are $text, $qnty, $unit and $price, each followed by the row id. The associated checkbox is called selected[] and has a class of itemCbox. For that, my jQuery code is:
$("#listDB").on("click", ".itemCbox", function(event) {
var id = this.value;
$text = $("#text"+id);
$qnty = $("#qnty"+id);
$unit = $("#unit"+id);
$price = $("#price"+id);
if ($(this).is(':checked'))
{
$text.css('background-color', '#fff');
$text.attr('disabled', false);
$qnty.attr('disabled', false);
$unit.attr('disabled', false);
$price.attr('disabled', false);
}
else
{
$text.css('background-color', 'rgba(0,0,0,0)');
$text.attr('disabled', true);
$qnty.attr('disabled', true);
$unit.attr('disabled', true);
$price.attr('disabled', true);
$text.val('');
$qnty.val('--');
$unit.val('--');
$price.val('0.00');
}
});
On selecting the cancel option in a dialog, I want the checkboxes to automatically be unchecked, and the corresponding textboxes to be disabled. To acheive this, further down, I use the code:
$("#cancelInsert").click(function(event){
$("input:checked[name='selected[]']").each(function () {
$(this).attr('checked', false);;
$(this).trigger('click');
});
});
This kinda works - the checkboxes are unchecked, but the associated textboxes are not disabled. Why is this? Is the corresponding event handler $("#listDB").on("click", ".itemCbox", function(event) {...} not firing? If so, why and how do I fix this?
I'm guessing this is because the event is only activated when the conditions for .on("click", ".itemCbox" are met, and simply triggering click is not enough. Is that correct?
Code Dump
My entire HTML is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SomuFinance - Add Items to Bill</title>
<link rel="stylesheet" type="text/css" href="../../jquery-ui-1.12.1/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="../../css/indexStyle.css">
<script src="../../scripts/jquery-3.1.1.min.js"></script>
<script src="../../scripts/jquery.validate.min.js"></script>
<script src="../../jquery-ui-1.12.1/jquery-ui.min.js"></script>
<script src="../../scripts/moment.js"></script>
<script src="../../scripts/addToBill.js"></script>
</head>
<body>
<form id="list" method="post" action="addToBill.php">
<div id="container">
<h1>Add Items</h1>
<input type="button" class="button" name="back" id="back" value="← Go Back to Bill" />
<select name="category_selector" id="category_selector">
<option value="All" selected>All</option>
</select>
<input type="button" class="button" name="add" id="add" value="Add Selected Items" />
<input type="button" class="button" name="edit" id="edit" value="Edit and Add" />
<input type="button" id="showSearch" class="button" name="search" value="Search" />
<input type="hidden" id="action" name="action">
<table id="listDB">
<tr>
<th>Select</th>
<th>ID</th>
<th>Sl. No</th>
<th>Item</th>
<th>Quantity</th>
<th>Unit</th>
<th>Price Based On</th>
<th>MRP</th>
<th>Seller's Price</th>
<th class="rightBorder">Last Updated On</th>
<th>Quantity Factor</th>
<th>Quantity</th>
<th>Unit</th>
<th>Price</th>
</tr>
</table>
</div>
</form>
<div class="dialogBG">
<div id="insertMessage" class="dialog">
<div class="closeDialog"></div>
</div>
</div>
<div class="dialogBG">
<div id="editItemContainer" class="dialog">
<div class="closeDialog"></div>
<h1>Edit Item</h1>
<form id="data" method="post" action="viewData.php">
<div>
<input type="hidden" id="id" name="id" required>
<div class="inp">
<label for="shop">ID : </label>
<input type="text" id="id_disp" name="id_disp" required disabled>
</div> <br>
<div class="inp">
<label for="shop">Shop : </label>
<input type="text" id="shop" name="shop" required readonly>
</div> <br>
<div class="inp">
<label for="category">Category : </label>
<input type="text" id="category" name="category" required readonly>
</div> <br>
<div class="inp">
<label for="item">Item : </label>
<input type="text" id="item" name="item" required readonly>
</div> <br>
<div class="inp">
<label for="qnty">Quantity : </label>
<input type="text" id="qnty" name="qnty" required readonly>
</div> <br>
<div class="inp">
<label for="unit">Unit : </label>
<input type="text" id="unit" name="unit" required readonly>
</div> <br>
<div class="inp">
<label for="price_based_on">Price based on : </label>
<input type="text" id="price_based_on" name="price_based_on" readonly>
</div> <br>
<hr>
<div class="inp" class=".centerAligned">
<label for="editPrice">Edit Price and Date : </label>
<input type="checkbox" id="editPrice" value="editPrice" name="editPrice">
</div>
<hr>
<div class="inp">
<label for="mrp">MRP (₹) : </label>
<input type="text" id="mrp" name="mrp" required readonly>
</div> <br>
<div class="inp">
<label for="sellers_price">Seller's Price (₹) : </label>
<input type="text" id="sellers_price" name="sellers_price" required readonly>
</div> <br>
<div class="inp">
<label for="last_updated_on">Last Updated on : </label>
<input type="date" id="last_updated_on" name="last_updated_on" required readonly>
</div>
<hr>
<div class="inp">
<label for="qf">Quantity Factor : </label>
<input type="text" id="qf" name="qf" required>
</div> <br>
<div class="inp">
<label for="calQnty">Calculated Quantity : </label>
<input type="text" id="calQnty" name="calQnty" required readonly>
</div> <br>
<div class="inp">
<label for="calUnit">Calculated Unit : </label>
<input type="text" id="calUnit" name="calUnit" required readonly>
</div> <br>
<div class="inp">
<label for="calPrice">Calculated Price (₹) : </label>
<input type="text" id="calPrice" name="calPrice" required readonly>
</div> <br>
</div>
<div class="inp">
<input id="insertBill" class="dialogButton" type="button" name="insertBill" value="Insert Item to Bill">
<input type="button" class="dialogButton cancelButton" name="cancelInsert" id="cancelInsert" value="Cancel" />
</div>
<div id="message"></div>
</form>
</div>
</div>
<div class="dialogBG">
<div id="searchDialog" class="dialog">
<div class="closeDialog"></div>
<form id="searchForm" name="searchForm" method="post" action="addToBill.php">
<h1>Search Criteria</h1>
<div class="inp">
<label for="group">Search in : </label>
<select id="field" name="field">
<option value="id">ID</option>
<option value="shop">Shop</option>
<option value="item">Item</option>
<option value="qnty">Quantity+Unit</option>
<option value="price_based_on">Price Based On</option>
<option value="MRP">MRP</option>
<option value="sellers_price">Seller's Price</option>
<option value="last_updated_on">Last Updated On</option>
</select>
</div> <br>
<div class="inp" id="criteriaDiv">
<label for="criteria">Search For : </label>
<input type="text" id="criteria" name="criteria" required>
</div> <br>
<div class="inp" id="unitDiv">
<label for="unitCriteria">Unit : </label>
<input type="text" id="unitCriteria" name="unitCriteria" required>
</div> <br>
<div class="inp" id="dateDiv">
<label for="dateCriteria">Last Updated On : </label>
<input type="date" id="dateCriteria" name="dateCriteria" required>
</div> <br>
<input type="button" id="search" class="dialogButton" name="search" value="Search" />
<input type="button" class="dialogButton cancelButton" name="cancelSearch" value="Cancel" />
</form>
</div>
</div>
</body>
</html>
The code to generate the dynamically generated checkboxes and textboxes are:
$("#category_selector").change(function(event) {
if($search!==null)
{
$search.remove();
$search = null;
}
$("#listDB").css('display', 'none');
$("#listDB").find(".catHead").remove();
$("#listDB").find(".data").remove();
if($(this).val()=="Search")
if(!$("#searchDialog").is(":visible"))
{
$("#showSearch").trigger('click');
return;
}
$("#action").val('getList');
var data = $("#list :input").serialize();
$.post($("#list").attr('action'), data, function(json)
{
if(json.listArr.length>0)
{
$.each(json.listArr, function() {
var $tr = $('<tr>', {
class : "catHead",
});
var $td = $('<td>', {
class : "catHead",
colspan : 14,
text : this.category
});
$("#listDB").append($tr.append($td));
$.each(this.value, function() {
var $tr = $('<tr>',{
class : "data"
});
var $td = $('<td>', {
html : '<input type="checkbox" class="itemCbox" id="selected[]" value="'+this.id+'" name="selected[]" /></td>'
});$tr.append($td);
$td = $('<td>', {
text : this.id
});$tr.append($td);
$td = $('<td>', {
text : this.catCount
});$tr.append($td);
$td = $('<td>', {
class : "leftAligned",
text : this.item
});$tr.append($td);
$td = $('<td>', {
class : "qnty",
text : this.qnty
});$tr.append($td);
$td = $('<td>', {
class : "unit",
text : this.unit
});$tr.append($td);
$td = $('<td>', {
class : "pbo",
text : this.price_based_on
});$tr.append($td);
$td = $('<td>', {
class : "rightAligned",
text : "₹"+this.mrp
});$tr.append($td);
$td = $('<td>', {
class : "rightAligned",
text : "₹"+this.sellers_price
});$tr.append($td);
var formattedDate = new Date(this.last_updated_on);
var d = formattedDate.getDate();
var m = formattedDate.getMonth();
m += 1; // JavaScript months are 0-11
var y = formattedDate.getFullYear();
var date = (d<10?"0":"")+d+"-"+(m<10?"0":"")+m+"-"+y;
$td = $('<td>', {
class : "rightBorder",
text : date
});$tr.append($td);
var $qf = $("<input>",{
type : "text",
class : "qfStyle",
id : "text"+this.id,
name : "text"+this.id,
disabled: true
});$td = $("<td>");$td.append($qf);$tr.append($td);
var $qnty = $("<input>",{
type : "text",
class : "textStyle",
id : "qnty"+this.id,
name : "qnty"+this.id,
value : "--",
disabled: true,
readonly: true
});$td = $("<td>");$td.append($qnty);$tr.append($td);
var $unit = $("<input>",{
type : "text",
class : "textStyle",
id : "unit"+this.id,
name : "unit"+this.id,
value : "--",
disabled: true,
readonly: true
});$td = $("<td>");$td.append($unit);$tr.append($td);
var $price = $("<input>",{
type : "text",
class : "textStyle rightAligned",
id : "price"+this.id,
name : "price"+this.id,
value : "0.00",
disabled: true,
readonly: true
});$td = $("<td>");$td.append($price);$tr.append($td);
$("#listDB").append($tr);
});
});
}
},"json");
$("#listDB").fadeIn(500);
});
