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/
Related
This is what I'm doing:
$('select').each(function () {
var selectedValue = $(this).find('option:selected').val();
if (selectedValue !== '0') {
$('option').each(function () {
if (!this.selected) {
$(this).attr('disabled', true);
}
});
}
});
The first option is "-Select an option-" that has a value of "0", that's why I do that validation. Basically what I want to do is to disable all options within a dropdown that has a selected value different than the first one. All dropdowns have been initialized with jquery's select2 and every one of them has a unique id.
The code I'm sharing doesn't work properly because I get the options disabled in every dropdown no matter if no option has been selected.
Can anybody help me fix this please?
I haven't tested but you should replace this line:
$('option').each(function () {
with this one:
$(this).find('option').each(function () {
Also, you should call this function using change event, which means i'ts triggered when some option is selected, like this:
$('select').on('change', function() {
The thing is that by doing this:
$('select').each(function () {
$('option').each(function () {
You were iterating through all select elements and all it's options, instead of iterating through the only select element that was clicked
How to disable row checkbox based on the column data. Have one datatable and have to write one condition, if firstname="Superman", need to disable checkbox of the row. So not possible to select the checkbox again. I tried with below code and I'm unbale to disable the checkbox. I tried below code,
this.http.get(dataUrl).subscribe(response => {
// setTimeout(() => {
this.persons = response.data;
$.each(this.persons, function(key, value) {
if (value.firstname == "Superman") {
console.log("inside");
// $('.checkboxCls').prop('disabled', true);
$(this)
.closest("tr")
.find("input[type=checkbox]")
.prop("disabled", true);
}
});
this.dtTrigger.next();
// });
});
Here is the working Stackblitz for reference. Could you please suggest what is the issue.
You can disable the checkbox from the HTML template side.
<td><input [disabled]="person.firstName === 'Superman'" type="checkbox" class="checkboxCls" name="id" [checked]="isChecked" value="{{person.id}}"></td>
Edited StackBlitz Code
I have three dropdown lists. When a selection is made from dropdown list 1, I want to remove that option from the other two. When dropdown list 1 changes it selection, add back the previous and remove the currently selected. This is the following code that I have. I feel I'm close, but still missing something essential.
<script>
$(document).ready(function () {
$("#option1dropdown").change(function () {
$("#option2dropdown").empty();
$("#option3dropdown").empty();
$("#option1dropdown option").each(function(){
if ($("#option1dropdown").val() != this) {
$("#option2dropdown").append(this);
$("#option3dropdown").append(this);
}
});
});
});
</script>
Append will move, not copy the element in question. You should also double check your comparison within the if.
$(function () {
$("#option1dropdown").change(function () {
$("#option2dropdown").empty();
$("#option3dropdown").empty();
$("#option1dropdown option").each(function(idx, item){
if ($("#option1dropdown").val() != $(item).val()) {
$("#option2dropdown").append($(item).clone());
$("#option3dropdown").append($(item).clone());
}
});
});
});
https://jsfiddle.net/egeLh428/
This might seem similar to other questions, and I have found and read through those questions and tried them, but I haven't gotten a working solution as of course, my code is unique and I need maybe another set of eyes to help me find my bug.
Anyway, the problem:
I'm creating a table (with PHP), and essentially if a cell has a value, the row gets an id of 'foo' and is hidden (using CSS - display: none;), and when I click a checkbox I'm trying to display all those hidden rows.
<tr id='foo'><td>this row is hidden</td></tr>
<tr><td>this row is not hidden</td></tr>
My jQuery is currently this:
$("#showHiddenRows").click(function() {
if($(this).is(":checked")) {
alert("showing"); //This pops up
$("#tableName").each(function() {
if($("#tableName").find("tr").attr("id") === 'foo') {
$("#tableName").find("tr").attr("style", "display: initial;");
alert("found a hidden row"); //This does not pop up...
}
});
} else {
alert("hiding");
//essentially the same code here, but display:none;
}
So I added alerts as you can see, the "showing" and "hiding" alerts pop up, but the "found a hidden row" doesn't, implying that searching through my table doesn't find any rows with an ID of 'foo', and I'm not sure why. Is there a better way to do this/is this the best way, and if so what did I do wrong?
Thanks in advance!
Edit: Quick explanation of what I was intending the code to do:
Loop through each row in the tableName table
If you find a tablerow with an ID of 'foo', show or hide the row.
Do not use duplicate IDs; use a CSS class instead. By definition, IDs should be unique; therefore no two or more elements should have the same ID.
HTML:
<tr class='foo'><td>this row is hidden</td></tr>
<tr><td>this row is not hidden</td></tr>
JS:
$(function() {
$("#showHiddenRows").on('change', function() {
if( this.checked ) {
$('table tr.foo').show();
} else {
$('table tr.foo').hide();
}
});
});
Or, you could shorten it like this:
$(function() {
$("#showHiddenRows").on('change', function() {
$('table tr.foo')[ this.checked ? 'show' : 'hide' ]();
});
});
using non-unqiue id with jQuery will cause issues, but I'll leave that with you
here is what you should do to show hidden rows.
$("#showHiddenRows").click(function() {
if($(this).is(":checked")) {
$("#tableName").each(function() {
var table = $(this);
var hiddenRows = table.find("tr[id=foo]").show();
if(hiddenRows.length)
alert("found " + hiddenRows.length + " hidden rows");
});
} else {
alert("hiding");
}
});
Ended up with (thanks to user3558931):
$(function() {
$("#tableName").on('change', function() {
if($(this).(":checked")) {
$('#tableName tr#foo').show();
} else {
$('#tableName tr#foo').hide();
}
});
});
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`