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
Related
I have a code like this:
<tr>
<td>
<input type="checkbox" name="ordered[]" value="xxx"></input>
</td>
<td>
<input type="checkbox" name="inStock[]" value="yyy"></input>
</td>
</tr>
The code is repeated for each result in MySQL.
Also I'm using this code:
<script>
$('input[type="checkbox"]').on('change', function() {
// uncheck sibling checkboxes (checkboxes on the same row)
$(this).siblings().prop('checked', false);
});
</script>
I need to select only one checkbox per row (per table tr). What should I change in javascript?
Thanks!
I think you need something like this
$( document ).ready(function() {
$('input[type="checkbox"]').on('change', function() {
var checkedValue = $(this).prop('checked');
// uncheck sibling checkboxes (checkboxes on the same row)
$(this).closest('tr').find('input[type="checkbox"]').each(function(){
$(this).prop('checked',false);
});
$(this).prop("checked",checkedValue);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="checkboxes">
<tr>
<td>
<input type="checkbox" name="inStock[]" />inStock
</td>
<td>
<input type="checkbox" name="ordered[]" value="xxx" />ordered
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="inStock[]" value="yyy" />inStock
</td>
<td>
<input type="checkbox" name="ordered[]" value="xxx" />ordered
</td>
</tr>
</table>
I think what you are asking for is a RadioButton. Just give them different ids but the same name and you will be able to select just one of them.
Try applying selector based on element name:
$('input[name="ordered[]"]').on('change', function() {
Or you would probably want to add some other attribute to identify the specific element you wish to select.
Since you haven't specified which sibling, say you can grab the first element out of a jQuery object using first:
$(this).siblings().first().prop('checked', false);
You can also do
$(this).siblings(".bar").eq(0).text()
You can use the eq method to reduce the matched set of elements to one at a specific index:
If you use radio buttons and use the same name for all of them, you are only able to select one radio button at a time and the other ones gets uncheked and like our friend mentioned you need to include your <td></td> tags in <tr></tr>tags.
I am having a table structure like this
<table>
<c forEach var="item" items="${manyItems}">
<tr>
<td id="item1"> ${item.data1} </td>
<td id="item2"> ${item.data2} </td>
<td> <button id="deleteButton"/> </td>
</tr>
</c:forEach>
</table>
Now I want to add a click event to the deleteButton
In my jquery is like this:
$(function() {
$('#deleteButton').click(function() {
var ele = $(this).parent();
/* fetch the other <td> siblings of the #deleteButton */
/* delete code goes here having an ajax query*/
});
});
This code is only deleting the 1st row of the table, but does not work on any other row.
I believe this is because we need to have distinct id's?
Kindly guide me to a good solution.
You are creating duplicate IDs, Identifiers in HTML must be unique and this is the expected behavior.
Use class, Here In example below I have converted deleteButton in to a CSS class so that we can use Class Selector (".class")
<button class="deleteButton"/>
Script
$('.deleteButton').click(function() {
var ele = $(this).parent();
});
Issue is the same ids for multiple elements in a single page. When this happens browser only looks for first instance of it and never goes ahead to look for another one, This is the reason one should understand that IDs should be unique per element.
change to class name instead:
<table>
<c forEach var="item" items="${manyItems}">
<tr>
<td class="item1"> ${item.data1} </td>
<td class="item2"> ${item.data2} </td>
<td> <button class="deleteButton"/> </td>
</tr>
</c:forEach>
</table>
and jquery:
$(function() {
$('.deleteButton').click(function() {
var ele = $(this).parent();
/* fetch the other <td> siblings of the .deleteButton */
/* delete code goes here having an ajax query*/
});
});
First think that, id is known unique, if u need to have click event for two button, u can use class for selecting the button, so try to follow the standards, id is unique selector and class is multiple selector.
I am reading tables tr id with closest attribute on change but I keep getting wrong values and do not know how to fix.
If I choose the firts the "lower"(16) checkbox, I get the tr id ok and after that the upper one everythins peachy. Now if I do it the other way around I keep only getting the value of the "top"(17) one. My guess is that it is because the class name is the same, but I´m not sure and I can not influence the class name, since it is generated by Datatables.
Could someone take a peek at jquery and tell me what I´m doing wrong.
Thank you for your help.
var a = $(".report_report").change(function() {
var closestTr = $('.report_report:checkbox:checked').closest('tr').attr('id');
alert(closestTr);
This the basic table concept
<table class="something">
<tr id = "17">
<td>
<input class="report_report" type = "checkbox">
</td>
</tr>
<tr id = "16">
<td>
<input class="report_report" type = "checkbox">
</td>
</tr>
</table>
try
HTML
<table class="something">
<tr id="17">
<td>
<input class="report_report" type="checkbox"/>
</td>
</tr>
<tr id="16">
<td>
<input class="report_report" type="checkbox"/>
</td>
</tr>
</table>
JS
$(".report_report").change(function() {
alert($(this).closest("tr").attr("id"));
});
DEMO
IF you want all selected check box with parent tr id
$(".report_report").change(function () {
var cheked = $(".report_report").filter(function () {
return this.checked;
}).closest("tr").get();
console.log(cheked);
});
NOTE: you html is invalid tr is not closed
I have a table. Inside table i have rows, each with a column : checkbox.
as following
<table>
<tr class="row">
<td class ="checkclass" ><input type="checkbox"></td>
<td></td>
<td></td>
</tr>
<tr class="row">
<td class ="checkclass" ><input type="checkbox"></td>
<td></td>
<td></td>
</tr>
</table>
I want whenever i select the checkbox, a pop up is created.
Please note : i can not edit the html code.. However i can only do some changes in javascript.
PS : At last i want to highlight the selected row.
well you could use the Jquery library and take advantage of the .change() functionality
$('.target').change(function() {
alert('Handler for .change() called.');
});
reference: http://api.jquery.com/change/
On how to use JQuery is a different question
Now for javascript its a bigger hack:
function checkAddress(checkbox)
{
if (checkbox.checked)
{
alert("a");
}
}
To add the on click on the HTML with Javascript
document.getElementById("ElementID").setAttribute("onchange", function() {checkAddress(this));
HTML
<input type="checkbox" name="checkAddress" />
please check following links
http://jqueryui.com/dialog/#modal-form
http://www.mywebdeveloperblog.com/my-jquery-plugins/modalpoplite
<td class ="checkclass" ><input type="checkbox" onchange='checkBoxClicked();'></td>
function checkBoxClicked()() {
alert("Hi");
}
for more info you can use [javascript pop-up][1] but i will suggest to go with jQuery or modal
[1]: http://www.echoecho.com/jsbasics.htm
you can do with jquery
$('.checkclass input').change(function() {
// code here
});
I hope it will help to solve your problem.
I need to loop through all checkboxes that are inside a div tag with id #abc123
How can I do this?
$("#abc123").foreach( ???? )
Update
my html row looks like:
<tr>
<td><input .../> </td>
<td>234</td>
</tr>
I need to add the value of the <td> into the ID of the checkbox.
Would I just get the parent, then ancestor it somehow?
$("#abc123 input[type=checkbox]").each(function()
{
});
UPDATE:
Ok, Let'd see if I got this straight. Given:
<tr>
<td><input .../> </td>
<td>234</td>
</tr>
You want the result to be (effectively)
<tr>
<td><input id="abc234" .../> </td>
<td>234</td>
</tr>
$("td input[type=checkbox]").each(function()
{
var id = $(this).next("td").text();
$(this).attr("id", "abc"+ id);
});
$("#abc123 input[type=checkbox]").each(function() {
$(this).dosomething();
});
Use a onkeydown event... I recommend the tab key which is keycode "9"
$(document).keydown(function(e){
if(event.keyCode == '9'){
...
}
Inside the if statement you'll need a nested if statement that checks which element is in focus and then assigns focus to the next element like this :
document.div.id.focus();
You didn't label where #abc123 is in your code. Also, do the <td> tags have any identification? The following may work.
$("#abc123 input:checkbox").each(function(i) {
id = $(this).closest('td').next('td').text();
$(this).attr('id', id);
});
I am not sure how deep your <div id="abc123"> is in the <td> so I used the closest() method to get to the cell wrapper. If it is only 1 deep, i.e. there is no <div> as it appears in your code, then you can just use parent(). Good luck.