Develop Reference

How to hide a row if checkbox is not selected inside html table?

I have dynamically created checkboxes inside HTML table like given in the following code. And I am trying to hide the rows whose checkbox is not checked by using below lines of code on the another button click() function.
$(document).on("click", "#allotBtn", function() {
$('#studentListBody tr [type="checkbox"]').each(function(i, chk) {
if (!chk.checked) {
$("#studentList tr:nth-child(" + i + ")").css("display", "none");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tbody id="studentListBody">
<tr role="row" class="odd">
<td class="centeralign hideFirstTD sorting_1">
<div class="checkbox checkbox-success ">
<input class="commoncheckbox" type="checkbox" id="studentId_-5ab87edaff24ae1204000857" name="studentId_-5ab87edaff24ae1204000857" value="5ab87edaff24ae1204000857">
<label></label>
</div>
</td>
<td class=" align-middle ">
<img alt="image" class="img-circle listProfilePicture" src="../img/studentcap.png">
</td>
<td>Raja Mir</td>
<td>7th</td>
<td>Male</td>
<td>Active</td>
<td>2016</td>
</tr>
<tr role="row" class="even">
<td class="centeralign hideFirstTD sorting_1">
<div class="checkbox checkbox-success ">
<input class="commoncheckbox" type="checkbox" id="studentId_-5ab8d5f8ff24ae120400085f" name="studentId_-5ab8d5f8ff24ae120400085f" value="5ab8d5f8ff24ae120400085f">
<label></label>
</div>
</td>
<td class=" align-middle ">
<img alt="image" class="img-circle listProfilePicture" src="../img/studentcap.png">
</td>
<td>Omer Jan</td>
<td>4th</td>
<td>Male</td>
<td>Active</td>
<td>2018</td>
</tr>
</tbody>
If there are more than 3 rows in the table, the above code hides the rows haphazardly.
Please help!!!

Try this:
$("#allotBtn").click(function(){
$('#studentListBody tr [type="checkbox"]:checked').closest("tr").hide();
});

The issue with your code is that i in the .each() loop starts indexing the elements at 0, whereas when you call nth-child in CSS, the first element is numbered as 1. Therefore the row you hide is always off by 1.
The fix is simple - add 1 to i each time you use it to set nth-child:
$(document).on("click", "#allotBtn", function () {
$('#studentListBody tr [type="checkbox"]').each(function(i, chk) {
if (!chk.checked) {
$("#studentListBody tr:nth-child("+(i+1)+")").css("display", "none");
}
});
});
Working demo: http://jsfiddle.net/jqabpru2/9/
Reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
https://api.jquery.com/each/
Or of course you can simplify it much more like in Viam's answer (https://stackoverflow.com/a/51762843/5947043) by finding the row which is the parent of the checkbox instead.
Again, credit to Viam, this can be done by writing
$("#allotBtn").click(function(){
$('#studentListBody tr [type="checkbox"]:checked').closest("tr").hide();
});
instead. Demo of this approach: http://jsfiddle.net/jqabpru2/10/

All you have to do is write the following code instead of your current jQuery code in a click function:
var checkList = $("tr[role='row'] .commoncheckbox");
checkList.each(function(){
$($(this).closest("tr[role='row']").hide());
if($(this).is(":checked")){
$($(this).closest("tr[role='row']").show());
}
});
Here is jsfiddle link on this.
Here is how to check a checkbox is checked or not using jQuery.

This one-liner should do it. No need for loops.
$(function() {
$(document).on("click", "#allotBtn", function() {
$('#studentListBody input[type=checkbox]:not(:checked)').closest('tr').hide();
});
});
Also, attaching the click event like this seems super strange - what exactly are you delegating the event to the document itself for anyway? Is the whole thing loaded dynamically?

JS w/ Kendo: Change label text on dropdown selection change

I'm attempting to change an Input label in my cshtml file by using my JS script, when any drop down selection is made. I've followed the documentation - but I'm not getting the intended result. There are no compile or runtime errors - and I have cut out anything that I didn't think was necessary for you all to see. Please let me know if I've left something out.
HTML:
<input id="searchByInput" class="rptInputBxWidth" data-role="dropdownlist" data-text-field="Value" data-value-field="Key" data-bind="value:searchBys_Value, enabled:searchBys_Enabled, source:searchBys_Source " data-option-label="SELECT" data-auto-bind="false" data-value-primitive="true" />
<td id="entryFieldInputLabel" class="inputLabel" align="right">123456</td>
JS:
$(document).ready(function () {
$('#searchByInput').change(searchByDropDownSelectionChange)
})
function searchByDropDownSelectionChange() {
$('#entryFieldInputLabel').text('Changed')
}
I've removed the many table row tags, and the data source loads correctly as well. What I expect to happen is that when the drop down (#searchByInput) is changed, the text on the label (#entryFieldInputLabel) is changed to "Changed"

Use html selector instead of text (td has no text proprety ):
$(document).ready(function () {
$('#searchByInput').change(searchByDropDownSelectionChange)
})
function searchByDropDownSelectionChange() {
$('#entryFieldInputLabel').html('Changed');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<input id="searchByInput" class="rptInputBxWidth" data-role="dropdownlist" data-text-field="Value" data-value-field="Key" data-bind="value:searchBys_Value, enabled:searchBys_Enabled, source:searchBys_Source " data-option-label="SELECT" data-auto-bind="false" data-value-primitive="true" />
<table>
<tr><td id="entryFieldInputLabel" class="inputLabel" align="right">1234</td>
</tr>
</table>
It would be better if you use span inside your table td
$(document).ready(function () {
$('#searchByInput').change(searchByDropDownSelectionChange)
})
function searchByDropDownSelectionChange() {
$('#entryFieldInputLabel span').html('Changed')
}
/*
or simply
$('#searchByInput').change(function(){
$('#entryFieldInputLabel').html('Changed');
})
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<input id="searchByInput" class="rptInputBxWidth" data-role="dropdownlist" data-text-field="Value" data-value-field="Key" data-bind="value:searchBys_Value, enabled:searchBys_Enabled, source:searchBys_Source " data-option-label="SELECT" data-auto-bind="false" data-value-primitive="true" />
<table>
<tr><td id="entryFieldInputLabel" class="inputLabel" align="right"><span>123</span></td>
</tr>
</table>

You just need to add <table> Markup so jQuery can select your <td> tag ID
<table>
<tr>
<td id=""></td>
</tr>
</table>
$(document).ready(function () {
$('#searchByInput').change(searchByDropDownSelectionChange);
function searchByDropDownSelectionChange() {
$('#entryFieldInputLabel').text('Changed!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="searchByInput" class="rptInputBxWidth" data-role="dropdownlist" data-text-field="Value" data-value-field="Key" data-bind="value:searchBys_Value, enabled:searchBys_Enabled, source:searchBys_Source " data-option-label="SELECT" data-auto-bind="false" data-value-primitive="true" />
<table>
<tr>
<td id="entryFieldInputLabel" class="inputLabel" align="right">123456</td>
</tr>
</table>

This issue is resolved, and can be closed. The solutions offered both reaffirmed that the issue was not in the code I provided. After experimentation, the solution was found in the order in which the "change" call was made in the JS ready function.
This particular call needed to be made after the page specific HTML was loaded, but before the kendo data was bound by ID.

Only one checkbox is checked at the time [duplicate]

So i have a div thats auto generated and inside are 3 check boxes with different id's & names and by default none of them are checked!! If one happens to get checked then i need the other two unchecked!!
So only one can be checked at a time ...
So all unchecked or only one checked!
<div class="configoptions">
<table class="configtable" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="fieldlabel">Include:</td>
<td class="fieldarea">
<label><input name="configoption[10]" id="co30" value="1" onclick="recalc()" type="checkbox">green</label>
</td>
</tr>
<tr>
<td class="fieldlabel">Include:</td>
<td class="fieldarea">
<label><input name="configoption[9]" id="co27" value="1" onclick="recalc()" type="checkbox">blue</label>
</td>
</tr>
<tr>
<td class="fieldlabel">Include:</td>
<td class="fieldarea">
<label><input name="configoption[11]" id="co31" value="1" onclick="recalc()" type="checkbox">white</label>
</td>
</tr>
</tbody>
</table>
</div>
Here is what i used to uncheck all divs on page ready.. since initially i need them unchecked.. that works great... now i need to make it so only one is check at a time if it is checked! Can someone gimme a hand,? Thx in advance!
$(document).ready(function() {
$('input[type=checkbox]').each(function() {
this.checked = false;
});
});

Use the prop function to change the checked property of checkbox and radio buttons
$(function(){
$('input:checkbox').prop('checked', false)
$('input:checkbox').click(function(){
if($(this).is(':checked')){
$('input:checkbox').not(this).prop('checked', false);
}
});
})
Demo: Fiddle

I had a similar issue and solved it like so (using part of Arun P Johny's answer - I wanted to share for those of you who might come across this as well.)
(function($checkbox,options){
$($checkbox).on('change', function() {
$("input[type='checkbox']").not(this).prop('checked', false);
});
});

Mouseenter not working for dynamic content

I have written a code where i need to trigger a functionality when mouse is over to specific elements.
Its working fine for below code for all static
$("table td").on("mouseenter",function(){
console.log("mouse entered")
});
but for all dynamic <td class="editcolumn">XYZ</td> event is not triggering even if i use below code
$("table td").on("mouseenter",".editcolumn",function(){
console.log("mouse entered")
});
Any idea how to make it work. I'm using jQuery 1.11

I know I just commented, but I figured I would show you an example:
HTML:
<table id="tablee" cellspacing="0">
<thead>
<tr class="tablehead">
<th>This</th>
<th>is</th>
<th>a</th>
<th>table</th>
<th>header</th>
<th>and</th>
<th>stuff</th>
<th>though</th>
</tr>
</thead>
<tr class="append">
<td class="edit-column">asdf</td>
<td class="edit-column">qwer</td>
<td class="edit-column">zxcv</td>
<td class="edit-column">rtyu</td>
<td class="edit-column">tyui</td>
<td class="edit-column">dfgh</td>
<td class="edit-column">dfgh</td>
<td class="edit-column">wert</td>
</tr>
<!-- ... -->
</table>
<br/>
<br/>
<input type="button" class="add-column" value="Add Column" />
Javascript:
$(function() {
$('.add-column').click(function() {
$('.append').append("<td class='edit-column'>iueo</td>");
$('.tablehead').append("<th>Mo columns</th>");
});
/* vvv - this */
$("#tablee").on('mouseenter', '.edit-column', function() {
/* ^^^ should be children or a child of this */
$(this).css('background-color', 'yellow');
});
});
Here is a fiddle
This question's answer gives a much better explanation of delegated events.

I too faced a similar problem for dynamic elements that are added or removed. In such situations you can create dynamic elements with event-handlers attached to their attributes i.e. in your case you can put the desired operations in a function which gets called by your attribute event handlers:
It should be something like this:
Javascript:
function whenMouseEnters() {
// perform some operations
}
Html:
<td onmouseenter="whenMouseEnters()">

If table is aviable on DOM load you can write delgated event for the td with class editColumn like this:
$("table").on("mouseenter",".editcolumn",function(){
console.log("mouse entered")
});

How to disable tbody

I have a tbody inside which there are href/input type text/ etc
I have a code to get all elements of tbody but how to disable it.
My tbody
<tbody id="FamilyHistory_3">
<tr>
<td class="tablecell">
<a id="FamilyHistory_3" name="316098" value="316098" onclick="javascript:save('FamilyHistory_3','test');" href="#">
<img style="border-style: none" src="../images/v10/arrow_doc.png">
</a> test
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td></td>
<td class="tablecell">
<input type="checkbox" value="Yes" name="10627_316098">Yes
<input type="checkbox" checked="" value="No" name="10627_316098">No
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="2px"></td>
</tr>
</tbody>
Below is my code to get the content of tbody
function save(inputID,category){
var content= document.querySelectorAll('#tbodyID');
for(var i=0; i<content.length; i++){
// how to disable all the elements inside it
}
}

JSFiddle
document.querySelector('#tbodyID input').disabled = true;
You don't need jQuery for this.
For more than one:
JSFiddle
var l = document.querySelectorAll('#tbodyID input');
for (i = 0;i<l.length;i++)
{
l[i].disabled = true;
}

There's no need to loop, jquery can deal with groups of elements just using selectors.
Use the Jquery selectors and the prop function to add disabled="disabled" to each one.
You can also select multiple items using a comma separated list
$('#tbodyID input, #tbodyID select, ....').prop('disabled', true);
disabling an a tag will not prevent it from being clicked though. May be better to hide() these.
$('#tbodyID a').hide();

You might need to specify the types of all elements you want to disable. If you have jQuery, you can do that with something like this:
$('#tbodyID').find('a, input').prop('disabled', true);
Explanation
$('#tbodyID') : Select the element with id tbodyID
find('a, input') : Find all the a and input elements inside it
prop('disabled', true) : Set the disabled property of each element returned by the previous command

Based on your answer finally I accomplished my task using below code. I know you people have already answer but then also I am posting my answer with few addition.
Disable input
$('[id='+inputID+']').find('input').attr('disabled', true);
id of tbody
Disable click but clickable hand will be there but no request will be submitted to server
$('[id='+inputID+']').attr('onclick','').unbind('click');
id of anchor tag
Thanks,Pise