I want a javascript or jquery function that searches in a html table and if no radio is selected notify the user.I only have table id and don't know radio id(s).
DEMO
In the code you can replace table with #tableID so that code only runs for that table
$(document).ready(function () {
if ($('table input[type=radio]:checked').length < 1) {
alert('No Radio Button Selected');
}
});
if you want to notify on table click
$('table').click(function () {
if ($('table input[type=radio]:checked').length < 1) {
alert('No Radio Button Selected');
}
});
You can use is() which returns a boolean:
if (!$('table :radio').is(':checked')) {
alert('No Radio Button Selected');
}
If at least one radio button is checked, this won't fired alert()
$('#table input:radio:checked') will give the radios checked inside table with id `#table`
Related
I have a simple table has 4 columns two of them dropdown menus with class= "ddm1" and "ddm2", what I need:
user can not select from "ddm2" before he select from "ddm1".
when user select any of these two dropdown menus, update flag column with a letter "g", else keep it empty.
here what I tried :
https://jsfiddle.net/yfzndsb3/1/
$(document).ready(function(){
$('select option[value="0"]').attr("selected",true);
$('.cf-table-block tbody tr').each(function () {
$(this).find('.ddm1 option').each(function () {
if(this.selected) {
$('.ddm1 input').closest("tr").find(".flag input").val("g");
}
else {
$('.ddm2').attr('disabled', true);
}
}
});
});
});
Here's what I tried, let me now if this is what you need. You have a little mistake with the class attribute:
<td calss="ddm1">
but I made it different. (Also, you didn't load the jQuery library in your fiddle)
https://jsfiddle.net/yfzndsb3/4/
I have 2 issues here. Clicking an input on a row should check the row's checkbox. Currently, only the first text input will check the checkbox because of .prev(). Is there a different way to do this? All inputs for that row should check that row's checkbox.
// check checkbox for clicked row
$('table').on('click', 'input[type=text]', function () {
$(this).closest('td').prev().find('input').prop('checked', true);
});
Also, the second block of code isn't working as it should. If you focus on a different row, if the text inputs from the previous (or any) row are blank - remove the checkbox. The checkbox will be a save, and there is no point of saving blank text inputs.
// remove check in inputs are empty for that row
$('input[type=text]').blur(function () {
$('table tr').each(function () {
if ($(this).find('input[type=text]:empty').length()) {
$('td').find('input').prop('checked', false);
}
});
})
http://jsfiddle.net/Ldge5qzn/
Find the closest tr instead and then find the inputs that are checkboxes and set the checked property
$(this).closest('tr').find('input[type=checkbox]').prop('checked', true);
For the second part, the :empty selector tests against the element having child elements not against empty values so that has to also be modified. Loop through each rows text inputs set a flag if any of them are not empty. Set checkbox accordingly
$('table tr').each(function () {
var emptyRow = true;
$(this).find("input[type=text]").each(function(){
if($(this).val().length > 0) {
emptyRow = false;
}
});
if (emptyRow) {
$(this).find('input[type=checkbox]').prop('checked', false);
}
});
JSFiddle Demo
You can do it by checking the closest tr - then finding the checkbox in that tr
$('table').on('click', 'input[type=text]', function () {
$(this).closest('tr').find('input[type=checkbox]').prop('checked', true);
});
Same thing with the second problem - check using the closest tr
Then you can use filter to get all the text inputs with values
Then check the length to see if there are any inputs returned - and set the checked property accordingly using .prop('checked',function()
$('input[type=text]').blur(function () {
var $tr = $(this).closest('tr'); // get closest tr
// get all of input[type=text] with value in that row
var inputsWithValue = $tr.find('input[type=text]').filter(function () {
return $.trim(this.value).length;
});
// set the checked to true if any element has value - else set checked to false
$tr.find('input[type=checkbox]').prop('checked', function () {
return inputsWithValue.length;
}).length;
});
FIDDLE
have a look at this .Hope this helps ...
$('table').on('click', 'input[type=text]', function () {
$(this).closest('td').parent('tr').find('input[type="checkbox"]').prop('checked', true);
});
full code below :-
JSFiddle
I'm struggling with a jQuery selection: I have a table that contains these columns (more or less)
Name (input field)
Surname (input field)
Note (textarea)
Button (a button to submit the relative note)
I would like to hide all buttons whose textarea is empty (to avoid the submission). This is the table:
The DOM structure of the single row is quite simple (I think):
So, I would like to select something like "all buttons contained in a td that is a brother of a td that cointains an empty textarea"...anf anf...can I do that with a single jQuery selection or not? Thank you in advance.
Of course!
$("tr td textarea").each(function() {
if (this.value == "") {
$(this).closest("td").next("td").find("button").prop("disabled", true);
}
});
You could hide buttons onLoad with the next selector:
$('textarea:empty').parent().next('td').find('button').hide();
Or if you want to disable the buttons:
$('textarea:empty').parent().next('td').find('button').prop("disabled", true);
It would be useful to check if user has type something in the textarea while on the page, and enable or not the button:
$( $('textarea') ).blur(function() {
var button = $(this).parent().next('td').find('button');
if($(this).val() === ''){
button.prop("disabled", true);
}else{
button.prop("disabled", false);
}
});
You can check this fiddle with your table included:
http://jsfiddle.net/6B9XA/4/
try this
$('table textarea').change(function()
{
var thisval=$.trim($(this).html())
if(thisval=='')
{
$(this).parent().next().children('button').attr('disabled')
}
})
I think you should use it this way:
$("#yourtableid").find("textarea").each(function() {
if (this.value == "") {
$(this).closest("tr").find("button").prop("disabled", true);
}
});
"#yourtableid" this should be changed to your table id.
Selectors optimization for performance boost.
You can use filter() to get only the buttons who contains an empty textarea within that row
$('tr button').filter(function(){ // get all buttons
return $(this).closest('tr').find('textarea').val() == ''; // only return those that are empty
}).prop('disabled',true); // disable the buttons
I have a table with a checkbox in each row and a button below it. I want to disable the button if at least one checkbox is checked.
<tbody>
<tr>
<td>
<input class="myCheckBox" type="checkbox"></input>
</td>
</tr>
</tbody>
<button type=submit id="confirmButton"> BUTTON </button>
The jQuery I came up with to accomplish this is the following:
$('tbody').click(function () {
$('tbody tr').each(function () {
if ($(this).find('.myCheckBox').prop('checked')) {
doEnableButton = true;
}
if (!doEnableButton) {
$('#confirmButton').prop('disabled', 'disabled')
}
else {
$('#confirmButton').removeAttr("disabled");
}
});
});
Naturally, this does not work. Otherwise I would not be here. What it does do is only respond to the lowest checkbox (e.g., when the lowest button is checked/unchecked the button is enabled/disabled).
I made a JSFIddle here although it does not show the same behaviour as locally.
Does any know how I can accomplish that it responds to all checkboxes and disables the button if they are ALL disabled?
Try this:
var checkBoxes = $('tbody .myCheckBox');
checkBoxes.change(function () {
$('#confirmButton').prop('disabled', checkBoxes.filter(':checked').length < 1);
});
checkBoxes.change(); // or add disabled="true" in the HTML
Demo
Explanation, to what I changed:
Cached the checkbox element list/array to make it a bit faster: var checkBoxes = $('tbody .myCheckBox');
removed the if/else statement and used prop() to change between disable= true/false.
filtered the cached variable/array checkBoxes using filter() so it will only keep the checkboxes that are checked/selected.
inside the second parameter of prop added a condition that will give true when there is more than one checked checkbox, or false if the condition is not met.
Add an event handler that fires when a checkbox is changed, and see if there are any checked boxes, and set the disabled property appropriately :
var boxes = $('.myCheckBox');
boxes.on('change', function() {
$('#confirmButton').prop('disabled', !boxes.filter(':checked').length);
}).trigger('change');
FIDDLE
Try this:
$('tbody').click(function () {
if ($('.myCheckBox:checked').length >= 1) {
$('#confirmButton').prop("disabled", true);
}
else {
$('#confirmButton').prop("disabled", false);
}
});
DEMO
Try this one:
let $cbs = $(".myCheckBox").change(function() {
if ($cbs.is(":checked")){
// disable #confirmButton if at least one checkboxes were checked
$("#confirmButton").prop("disabled", false);
} else {
// disable #confirmButton if all checkboxes were unchecked
$("#confirmButton").prop("disabled", true);
}
});
I'm writing some code that will allow the following:
1.) If a user checks a checkbox it will change the parent <tr> to have a class of selected (this can also be unchecked and remove the class)
2.) Any checkboxes that are already checked will have the class added on document load
3.) If a user checks the #checkall input then all inputs will become checked and add the class of selected (if checked again then it will unselect all and remove the class)
This is the code I have so far:
$("table input[name=choose]:checked").each(function()
{
$(this).closest("tr").addClass("selected");
});
$("table input[name=choose]").live("change", function()
{
$(this).closest("tr").toggleClass("selected");
});
if ($('#checkall:checked') == true)
{
$('#checkall').live("click", function()
{
$('table input[name=choose]').attr('checked', false);
$('table input[name=choose]').closest("tr").toggleClass("selected");
});
}
else
{
$('#checkall').live("click", function()
{
$('table input[name=choose]').attr('checked', true);
$('table input[name=choose]').closest("tr").toggleClass("selected");
});
}
The first two work fine but number 3 doesn't uncheck the checkboxes... Any ideas why? But the class part works fine??
Thanks
I guess it runs always into the else block (have you debugged this)?
Try writing this for checking if the checkbox is checked:
if ($('#checkall').attr('checked'))
Because if ($('#checkall:checked') == true) is always false..
either use
if ($('#checkall').is(':checked'))
or
if ( $('#checkall:checked').length )
Update after comment
Replace the entire third part (all the if/else) with
$('#checkall').live("change", function()
{
$('table input[name=choose]')
.attr('checked', this.checked)
.closest("tr")
.toggleClass("selected", this.checked);
});
demo at http://jsfiddle.net/gaby/KqwsZ/1/