We Keep Coding

Angular table and HTML Checked Boxes with Disabling Feature in Remaining Checked Boxes

The goal is to have all the checked boxes become disabled when one box is checked. When I use this jquery code below, for some reason it does not work as it does in the SO solution mentioned here.
In this example I am populating a table using a MVC controller in a nodejs and angular stack. When this table displays, there is a checkbox next to each name that prints in the table. Is there a solution to correctly disable the checkboxes being populated in this angular script when one checked box is selected?
html
<table>
<thead>
<th>Names</th>
</thead>
<tr dir-paginate="x in names | filter:search | itemsPerPage:8">
<div class="checkbox" id="nameList">
<td><label><input type="checkbox" name="name" value={{x.name}}> {{ x.name }}</label></td>
</div>
</tr>
</table>
js
$(document).ready(function(){
$('#nameList input[type=checkbox]').change(function(){
if($(this).is(':checked')){
$('#nameList').find(':checkbox').not($(this)).attr('disabled',true);
}else{
$('#nameList').find(':checkbox').attr('disabled',false);
}
});
})

Try using ng-change and ng-model directives of angular to handle all these things.
Refer here https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D.

Here's how you do it using angular's ng-change with ng-disabled. ng-change executes an angular function whenever some changes was made to an input field(in this case, checking and unchecking the checkbox), ng-disabled on the other hand disables the input fields if the condition is true
On your template, put these to your checkbox input tag
<tr dir-paginate="x in names | filter:search | itemsPerPage:8">
<div class="checkbox" id="nameList">
<td>
<label>
<input type="checkbox" ng-disabled="isCBdisabled" ng-model="yourCBmodel" ng-change="cbChanged()" name="name" value={{x.name}}>
{{ x.name }}
</label>
</td>
</div>
</tr>
Then on your angular controller, put this
$scope.isCBdisabled = false;
$scope.cbChanged = function() {
$scope.isCBdisabled = true;
};
So this is what I did, on my controller, I initialized a scope isCBdisabled into false so that it wont disable the checkboxes right away. Then made a function cbChanged() that changes isCBdisabled into true causing the checkboxes to be disabled because of ng-disabled. However, just like i`ve said, it will disable all checkboxes including the selected one so that's another thing to brainstorm.

Unable to uncheck checkbox from chrome

I am trying to check/uncheck a checkbox/radiobutton both from the table cell as well as the actual checkbox /radiobutton
I have written this below code to select a checkbox/radiobutton from table cell
Please refer code pen for actuall code.
The code works fine for IE 11 browser but not in Chrome. If i select the table cell then the checkbox is selected but in chrome when i check on the actual check box nothing happens .
I think it is the checkbox internally calls the PropagateBelow method.
Check/Uncheck check box for chrome(Select on the CHECKBOX itself on TABLE CELL works fine)
<table border="1">
<tr>
<td onclick="PropagateBelow(this);" style="width:100px;">
<input type="checkbox" id="test" value="Test123" />
</td>
</tr>
function PropagateBelow(tableCell) {
alert(tableCell);
var radioButtons = tableCell.getElementsByTagName('input');
for (var i = 0; i < radioButtons.length; i++) {
var radioButton = radioButtons[i];
if (radioButton != null && radioButton != undefined) {
if (radioButton.type == 'radio' || radioButton.type == 'checkbox') {
radioButton.click();
}
}
}
}

Not quite sure what the exact misbehavior is you're observing. What happens when I test your code is that when clicking the cell, PropagateBelow(this) is called which activates/deactivates the checkbox, based on its current state. When I click the checkbox, the checkbox is ticked, but then the click event bubbles up, again triggering PropagateBelow(this) which in turn unticks the checkbox again.
If you want to prevent that, you have to stop the propagation of the event when you click on the checkbox, like
<table border="1">
<tr>
<td onclick="PropagateBelow(this);" style="width:100px;">
<input type="checkbox" id="test" value="Test123" onclick="cancelPropagation();" />
</td>
</tr>
</table>
and then implement cancelPropagation() as follows
function cancelPropagation(ev){
var event = ev || window.event;
event.stopPropagation();
return false;
}
Here's your modified codepen project: http://codepen.io/anon/pen/MwEpxm
As mentioned, I'm not sure I got what you mean. If this doesn't help, let me know, so I'll delete my answer again :)

Instead of using a JavaScript function to propagate the click to all of the radio buttons, you can wrap the radio button in label which takes up the whole space of the table cell. Wrapping a radio button in a label will allow you to click anywhere in the label to toggle the radio button without having to use any JavaScript.
Please see example here: http://codepen.io/anon/pen/GJMWzb
<table border="1">
<tr>
<td style="width:100px;">
<label style="width:100%;height:100%;display:block;">
<input type="checkbox" id="test" value="Test123" />
</label>
</td>
</tr>
</table>

Funnily enough this does work fine for me in Chrome, but as a general rule it's better to set the checked property to true on checkboxes instead of trying to simulate clicks.
This could simply be done by replacing radioButton.click(); with radioButton.checked = true;, or if you wanted to toggle the checkbox radioButton.checked = !radioButton.checked;.
https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/checked

Jquery Datatable Sort Click Event in Table Header Not in Column Title Text

I have this table which I implement the Jquery-DataTables
and in that I have a Select All function that works well;
<thead>
<tr>
<th>
<label>
<input type="checkbox" > All
</label>
</th>
</tr>
</thead>
the problem is when I clicked the checkbox the sort event of table is also being performed. what I want is, when I click on the Text "All" or the Checkbox the sort event will not perform, instead, it will only perform as usual if the table header(outside the Text or Checkbox) and the Sort-Icon is clicked.
any idea how to do it?

I have solved this issue by running this script (from this) after initialization of Jquery-Datable to my table;
$('input').click(function (event) {
event.stopPropagation();
});
hope it will help someone someday.

How to work with checkboxes generated from ezMark?

I'm using ezMark library in my website alongwith PHP, Smarty, jQuery, etc. Here on one of the webpages I want to disable few checkboxes depending on some condition. After that there is one parent check box, upon selection of which all the checkboxes which are not disabled should get checked and should work vice-versa on deselcting the parent check box. Also after checking the parent checkbox if I uncheck any one of the selected checkboxes(which are not disabled) the parent checkbox should also get unchecked. I tried alot to achieve this by regular code of checking and uncheking the checkboxes (.attr('checked','checked') and .removeAttr('checked'); respectively) but doesn't work in this situation due to ezMark library. Now I'm using following code to check and uncheck the checkboxes as follows:
Code for parent check box:
<p id="parentCheckbox" class="custom-form">
<input class="custom-check" type="checkbox" name="" id="ckbCheckAll">
<a class="drop" href="#">more</a>
</p>
The smarty code for multiple checkboxes creation:
{section name=tests loop=$all_tests}
<p class="custom-form">
<input class="custom-check checkBoxClass" type="checkbox" name="" id="" {if $all_tests[tests].is_test_lock!=1 && $all_tests[tests].test_assign_to_package=='no'} {else} disabled {/if}>
<label>{$all_tests[tests].test_name}</label>
</p>
{/section}
The jQuery code for selecting and deselectiong the checkboxes upon parent checkbox:
$(document).ready(function() {
$("#ckbCheckAll").click(function () {
if ($(this).is(':not(:checked)'))
$(".ez-checkbox").removeClass("ez-checked");
if($(this).is(':checked'))
$(".ez-checkbox").addClass("ez-checked");
});
});
When I look into Firbug Element Inspector I'm getting the different HTML created for the child checkboxes as follows:
<p class="custom-form">
<div class="ez-checkbox ez-checked">
<input id="" class="custom-check checkBoxClass ez-hide" type="checkbox" name=""></input></div>
<label>N1P: Gravitation</label>
</p>
I'm not getting from where this <div> tag is coming. So in order to check and uncheck all the child checkboxes on selection of paren checkbox I'd written above logic. The normal logic is not getting worked due to this div tag and ezMark library. With the current code all the child checkboxes are getting selected including the disabled ones upon selecting the parent checkbox and upon unchecking the parent checkbox all the child checkboxes get unselected. Can you help by showing how to achieve the required functionality of selection and deselection of child checkboxes in this scenario? Thanks in advance.

The jQuery.ezMark generated structure is not really a problem to achieve what you want to. I wrote this jsFiddle to show you a way to proceed based on css classes to identify parent (.l0) and children (.l1).
I manually disabled some checkboxes for sample, but you can use your condition to disabled them.
Hope this can help you ;)

Hide table row where radio button is selected after form submit

I have table that is contained in form. The table is built from a CF loop where I have assigned each row ID the NumberID in the sql table. I have a submit button that performs an jquery ajax submit. I need to hide the row that was submitted instead of doing a page reload.
<form id="unsortedTable" >
<input type="submit" id="makeParentButton" value="Make Parent">
</span>
<div class="row-fluid"><p></p>
<table class="table table-bordered table-striped table-hover">
<tbody>
<cfloop query="nonAffiliated">
<tr id="#NumberID#">
<td><input type="radio" name="NumberID" value="#NumberID#"></td>
</tr>
</cfloop>
</tbody>
</table>
</div>
</form>
Then I have the JavaScript that triggers when the submit is performed.
$(document).ready(function(e) {
$("#unsortedTable").submit(sendForm);
});
function sendForm() {
var row = $(this).closest('tr');
$.post('handlers/formHandler.cfm',
$("#unsortedTable").serialize(),function(data,status){
$("#unsortedTable")[0].reset();
row.hide(); //This is just a guess
});
return false
}
Everything works except I can't get that submitted row to hide().

Unless the form is within the table row you are trying to hide, $(this).closest('tr') will not find the row. You probably thought $(this) does refer to the button clicked, but you are using a subit handler on the form, not a click handler on the button.
You might want to find the row a different way, either by id or by finding the button first:
$('#rowId').hide();
or
$('#buttonId').closest('tr').hide();
EDIT:
After re-reading your question more carefully, I realized that you don't want the submit button to be hidden, but the radio button. For that you could do something like this:
$(this).find('input:radio:checked').closest('tr').hide();