jquery button enable if checkbox and select option - javascript

How do I enable the button if one or more checkbox is checked and if the select option of the checked checkbox is not equal to "no action"? Treating it as a row of table with checkbox being first element and select as last element?
This is how I am checking checkbox values.
<script>
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
submitButt.attr("disabled", "disabled");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
</script>
//dynamically generating rows
for ws in my_zones:
html_output += \
''''<tr><td><input type="checkbox" name="checkboxes" value="%s"/></td><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>
<select name="action">
<option value='no action'>Choose Action</option>
<option value='scan'>Reboot</option>
<option value='swap'>Rebuild</option>
<option value='terminate'>Terminate</option>
</select></td></tr>''' \
% (.......)

At each check state change, verify what you want: if there at least one checkbox checked and if the "no action" checkbox is not checked. Then you can enable the submit button, or otherwise disable it.
function updateSubmitButtonState(){
var enableableLineCount= 0;
$("tr").each(function(){
if( isEnableableLine( this ) )
enableableLineCount++;
});
if( enableableLineCount > 0 )
$('[type="submit"]').removeAttr("disabled");
else
$('[type="submit"]').attr("disabled","disabled");
function isEnableableLine( tr ){
if(
$("input[type='checkbox']", tr).is(":checked") &&
$("select option[value='no-action']:selected", tr ).length == 0
)
return true;
else
return false;
}
}
$("input[type='checkbox']").on("click",updateSubmitButtonState );
$("select").on("change",updateSubmitButtonState );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="checkbox" name="checkbox-group">
</td>
<td>
<select>
<option value="option1">option 1 </option>
<option value="option2">option 2 </option>
<option value="no-action">no-action</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox-group">
</td>
<td>
<select>
<option value="option1">option 1 </option>
<option value="option2">option 2 </option>
<option value="no-action">no-action</option>
</select>
</td>
</tr>
</table>
<input type="submit" disabled="disabled" value="Submit" id="submit" />
edit
I have adapted the snippet to fit the goals described in coments.
Now, at each change, the whole table is parsed. If there not hundred of line, it could be sufficient. But it is not very optimised.

https://jsfiddle.net/gzrv8v3q/13/
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
submitButt.attr("disabled", "disabled");
$('#form1').change(function() {
var disable = true
if ( $('#select').val() != "no-action") {
checkboxes.each(function() {
if ($(this).is(":checked")) {
disable = false
}
})
}
submitButt.attr('disabled', disable);
})

The disabled attr must be deleted. Even it existing makes it disabled. I use: https://api.jquery.com/removeAttr/
Also, your code will not add disabled back again if the checkbox is unchecked, also clarify if that is part of your question.

Related

Hidden div appear on table option select

I have a page with a form and questions of these forms are asked on two separate tables. I want to make the second table appear only if One, Two or Three is selected from the first table, and be invisible by default. If Zero is selected again, table 2 disappears again.
I got it to partially work with the code below, however I think my script is cancelling each other out. I can get it to work with One, Two or Three, but not all three selections. In this case, table 2 only appears when I select "Three", and nothing happens when Zero, One and Two is selected.
How would I go about changing the script to let it appear when One, Two or Three are selected and disappear when Zero is selected once again.
<table>
<tr>
<td>Numbers</td>
<td>
<select id="numbers" name="numbers">
<option value="Zero" selected>0</option>
<option value="One">1</option>
<option value="Two">2</option>
<option value="Three">3</option>
</select>
</td>
</tr>
</table>
<span id="animals" style="display: none;">
<table>
<tr>
<td>Animal</td>
<td>
<select id="animal" input name="animal">
<option value="Dog">Dog</option>
<option value="Cat">Cat</option>
<option value="Rabbit">Rabbit</option>
</select>
</td>
</tr>
</table>
</span>
<script>
document.getElementById('numbers').addEventListener('change', function () {
var style = this.value == 'One' ? 'inline' : 'none';
document.getElementById('animals').style.display = style;
});
document.getElementById('numbers').addEventListener('change', function () {
var style = this.value == 'Two' ? 'inline' : 'none';
document.getElementById('animals').style.display = style;
});
document.getElementById('numbers').addEventListener('change', function () {
var style = this.value == 'Three' ? 'inline' : 'none';
document.getElementById('animals').style.display = style;
});
</script>
using Array include, check code snippet.
<html>
<body>
<table>
<tr>
<td>Numbers</td>
<td>
<select id="numbers" name="numbers">
<option value="Zero" selected>0</option>
<option value="One">1</option>
<option value="Two">2</option>
<option value="Three">3</option>
</select>
</td>
</tr>
</table>
<span id="animals" style="display: none;">
<table>
<tr>
<td>Animal</td>
<td>
<select id="animal" input name="animal">
<option value="Dog">Dog</option>
<option value="Cat">Cat</option>
<option value="Rabbit">Rabbit</option>
</select>
</td>
</tr>
</table>
</span>
<script>
function checkVals(val){
if(!val) {
val = document.getElementById('numbers').value;
}
var allowed = ["One", "Two", "Three"];
var check = allowed.includes(val);
if(check){
document.getElementById('animals').style.display = 'block';
}else{
document.getElementById('animals').style.display = 'none';
}
}
document.getElementById('numbers').addEventListener('change', function () {
var val = this.value;
checkVals(val);
});
window.onload="checkVals()";
</script>
</body>
</html>
You do not need to write three event listeners. Just one can do this.
document.getElementById('numbers').addEventListener('change', function () {
var style = (this.value == 'One' || this.value == 'Two' || this.value =='Three') && (this.value != 'Zero') ? 'inline' : 'none';
document.getElementById('animals').style.display = style;
});

Traversing through table rows and disabling input in second column

please have a look at the below code.
<table>
<tr>
<td>
<select name='td1'>
<option value=1>One</option>
<option value=2>Two</option>
<option value=3>Three</option>
</select>
</td>
<td>
<select name='td2'>
<option value=1>One</option>
<option value=2>Two</option>
<option value=3>Three</option>
</select>
</td>
</tr>
</table>
JavaScript:
<script>
document.getElementsByTagName("tr").each(function(){
$(this).getElementsByTagName("td")[1].getElementsByTagName("select").disabled=true;
})
</script>
Requirement is
1. By default, the select field in the second column(i.e, second td's select) must be disabled.
2. the second select field can only be enabled only when the user selects third option in the first select field.
3. the solution must be in pure javascript( not using jquery)
Thanks in Advance.
Array.from(document.querySelectorAll('tr')).forEach(tr => {
const secondSelect = tr.children[1].querySelector('select');
secondSelect.disabled = true;
tr.querySelector('td select').addEventListener('change', function() {
secondSelect.disabled = (this.value != 3);
});
});
This code will work only for one row having two select option,which is perfectly suitable for your example.
var selectTag = document.getElementsByTagName('table')[0].getElementsByTagName('tr')[0].getElementsByTagName('select')
selectTag[1].disabled = true;
selectTag[0].addEventListener("change", function(){
if(selectTag[0].value == 3){
selectTag[1].disabled = false;
}
else{
selectTag[1].disabled = true;
}
});
for disabeling the select you just need to add the disabled attribute using setAttribute , or element.disabled = true , then listen for the change of the other select and check its value, if it's equal to 3 remove the disabled,
let td2 = document.querySelector('[name=td2]');
td2.disabled = true ;
let td1 = document.querySelector('[name=td1]');
td1.addEventListener('change', function() {
if (+this.value === 3) // the + sign is a shorthand for parseInt
td2.disabled = false ;
else
td2.disabled = true ;
})
<table>
<tr>
<td>
<select name='td1'>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
</td>
<td>
<select name='td2'>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
</td>
</tr>
</table>

Event binding between checkbox and dropdown menu

Here is my table:
<table>
<tr>
<td>
<label for="check">
<input type="checkbox" name="check" id="check" value="true" />
Select something
</label>
</td>
<td>
<label for="select">
<select name="select" id="select">
<option value="Default"></option>
<option value="A">A</option>
<option value="B">B</option>
</label>
<td>
</tr>
I am trying to link the checkbox functionality with the dropdown menu as such: if the checkbox is unchecked, and the user selects an option whose option value is not "Default", then the checkbox should get checked automatically and highlighted with a 'selected' class. And then anytime the "Default" value is selected, the checkbox should be unchecked and unhighlighted regardless of its previous state.
jQuery("#check").on("click", function() {
if(!jQuery(this).is(":checked")) {
jQuery("#select").val("Default");
}
});
jQuery("#select").on("change", function() {
if(jQuery(this).val() === "Default") {
jQuery("#check").attr("checked", false);
}
});
Try to use "onChenge", like this:
<html>
<body>
<table>
<tr>
<td>
<label for="check">
<input type="checkbox" name="check" id="check" value="true" />
Select something
</label>
</td>
<td>
<label for="select">
<select name="select" id="select" onchange="Select_Change(this)">
<option value="Default"></option>
<option value="A">A</option>
<option value="B">B</option>
</label>
<td>
</tr>
<script>
function Select_Change( elem )
{
if (elem.value != 'Default')
{
CheckBox_Select( true );
}
else
{
CheckBox_Select( false );
}
}
function CheckBox_Select( check )
{
document.getElementById('check').checked = check;
}
</script>
</body>
</html>
First the function:
function selectValueChanged(){
var selected = document.getElementById("select").selectedIndex;
var options = document.getElementById("select").options;
if(document.getElementById("check").checked){
if(options[i].value == "Default"{
document.getElementById("check").checked = false;
document.getElementById("check").className = document.getElementById("check").className.replace(" selected", "");
}
else{
if(options[i].value != "Default"){
document.getElementById("check").checked = true;
document.getElementById("check").className += " selected";
}
}
}
Then give the select an onchage event so it would look like:
<select name="select" id="select" onchange="selectValueChanged()">

jQuery set dropdown value on checkbox change

I have a group of dynamic rows each with a dropdown and checkboxes and need to change the individual dropdown value of that row if all its checkboxes are selected.
Currently I can only get this to work if I select all checkboxes in all rows.
How can I make it so only a row's dropdown changes when the checkboxes it belongs to are all selected?
I setup this fiddle with markup of what works right now. Thanks for the help!
http://jsfiddle.net/uyv3mk7b/
<!--First row eventRegistrations[1]-->
<select class="regSelect" name="eventRegistrations[1].eventRegistrationStatusTypeID" id="registrationStatusSelect">
<option value="1">Pending</option>
<option value="2">Attended</option>
</select>
<input type="checkbox" class="regChecked" name="eventRegistrations[1].markAttendance[1].attendanceDate" value="1">9/21/14
<input type="checkbox" class="regChecked" name="eventRegistrations[1].markAttendance[2].attendanceDate" value="2">9/22/14 <br>
<!--There could be multiple dynamic rows whose input names increment like eventRegistrations[i]-->
<!--Next dynamic row eventRegistrations[2]-->
<select class="regSelect" name="eventRegistrations[2].eventRegistrationStatusTypeID" id="registrationStatusSelect">
<option value="1">Pending</option>
<option value="2">Attended</option>
</select>
<input type="checkbox" class="regChecked" name="eventRegistrations[2].markAttendance[1].attendanceDate" value="1">10/23/14
<input type="checkbox" class="regChecked" name="eventRegistrations[2].markAttendance[2].attendanceDate" value="2">10/24/14
//Change dropdown to Attended when all of checkbox group is selected
//Currently only works when all 4 checkboxes are selected, not the 2 in each group/row
$('.regChecked:checked').length == $('.regChecked').length
$(".regChecked").change(function () {
if ($('.regChecked:checked').length == $('.regChecked').length) {
$('.regSelect').val('2');
}
});
You need to add a wrapper to your rows, like section, or div, and on change, you can loop through only the parents childrens collection.
Tyr this: http://jsfiddle.net/uyv3mk7b/3/
HTML
<!--First row eventRegistrations[1]-->
<section>
<select class="regSelect" name="eventRegistrations[1].eventRegistrationStatusTypeID" id="registrationStatusSelect1">
<option value="1">Pending</option>
<option value="2">Attended</option>
</select>
<input type="checkbox" class="regChecked" name="eventRegistrations[1].markAttendance[1].attendanceDate" value="1">9/21/14
<input type="checkbox" class="regChecked" name="eventRegistrations[1].markAttendance[2].attendanceDate" value="2">9/22/14 <br>
</section>
<!--There could be multiple dynamic rows whose input names increment like eventRegistrations[i]-->
<!--Next dynamic row eventRegistrations[2]-->
<section>
<select class="regSelect" name="eventRegistrations[2].eventRegistrationStatusTypeID" id="registrationStatusSelect2">
<option value="1">Pending</option>
<option value="2">Attended</option>
</select>
<input type="checkbox" class="regChecked" name="eventRegistrations[2].markAttendance[1].attendanceDate" value="1">10/23/14
<input type="checkbox" class="regChecked" name="eventRegistrations[2].markAttendance[2].attendanceDate" value="2">10/24/14
</section>
jQuery
//Change dropdown to Attended when all of checkbox group is selected
$(".regChecked").change(function() {
var checks = $(this).parent().find('.regChecked');
var allChecked = true;
$.each(checks, function(idx, value) {
if (!$(this).is(':checked')) {
allChecked = false;
}
});
if (allChecked) {
$(this).parent().find('.regSelect').val(2);
} else {
$(this).parent().find('.regSelect').val(1);
}
});
//When dropdown value is Attended, select all in checkbox group
$("select").change(function() {
if ($(this).val() === '2') {
$(this).parent().find('.regChecked').prop('checked', true);
}
});
You can add some sort of identifier to each group like
<select class="regSelect group-select-1" name="eventRegistrations[1].eventRegistrationStatusTypeID" id="registrationStatusSelect">
<option value="1">Pending</option>
<option value="2">Attended</option>
</select>
<input type="checkbox" class="regChecked group-1" name="eventRegistrations[1].markAttendance[1].attendanceDate" value="1">9/21/14
<input type="checkbox" class="regChecked group-1" name="eventRegistrations[1].markAttendance[2].attendanceDate" value="2">9/22/14 <br>
and then manipulate with this identifiers
$(".group-1").change(function () {
if ($('.group-1:checked').length == $('.group-1').length) {
$('.group-select-1').val('2');
}
});
Fiddle
UPD Added fiddle with else cases, thx to Roberto Linares.
P.S. ids have to be unique

Add disabled to form option that are on the table list

I have a table and a form with a dropdown:
<table>
<tr>
<td class="text">Apple</td>
<td class="name">John</td>
</tr>
<tr>
<td class="text">Orange</td>
<td class="name">Smith</td>
</tr>
</table>
<form>
<select>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Orange">Orange</option>
<option value="Grape">Grape</option>
</select>
</form>
and I want to add a disabled attribute to every option on the dropdown that is already on the table resulting in this:
<table>
<tr>
<td class="text">Apple</td>
<td class="name">John</td>
</tr>
<tr>
<td class="text">Orange</td>
<td class="name">Smith</td>
</tr>
</table>
<form>
<select>
<option value="Apple" disabled>Apple</option>
<option value="Banana">Banana</option>
<option value="Orange" disabled>Orange</option>
<option value="Grape">Grape</option>
</select>
</form>
Is there any way to achieve using jQuery?
$("td.text").text(function(i, txt) {
$("select option[value='" + $.trim(txt) + "']").prop("disabled", true);
});
DEMO: http://jsfiddle.net/322PA/
Get each item value from the select option and compare it with the data inside table row. If both matches then disable the data/option in dropdownlist/select element.
$(document).ready(function(){
//loop through the select option
$("form > select").children().each(function(){
//store each option to check later
var item = $(this).val();
//loop through table row
$("table").children().each(function(){
//loop through table data
$("tr").children().each(function(){
//compare previously stored item with table data value
if(item == $(this).text()){
//disable option
$("form > select > option:contains(" + item + ")").attr("disabled", "disabled");
}
});
});
});
});
jsFiddle Demo
I am guessing you will be dynamically changing the content of the table and want the select element to update when the table changes. You must therefore make sure it updates each time it's used.
$("#theSelector").bind("mouseenter", disableOptions);
function disableOptions() {
var tableData = [];
$("#theTable tr").each(function() {
tableData.push($(this).children(":first").text());
});
$("#theSelector option").each(
function() {
if(jQuery.inArray(this.text, tableData) > -1) {
$(this).prop('disabled', true);
}
}
);
}

Categories