I am trying this code to disable my other options in my aspcheckbox list( not a checkbox this is asp.net checkboxlist control)...
Here is the jquery
$(document).ready(function () {
$('#<%=lstExposureValue.ClientID%> input:checkbox').click(function () {
var currentIdone = 'Unknown';
var checked = false;
$('#<%=lstExposureValue.ClientID%> input:checkbox').each(function () {
var currentId = $(this).next().html();
if (currentId == currentIdone) {
if (checked) {
$(this).prop('enabled', true);
$("#<%=lstExposureValue.ClientID%> input:checkbox:not(:checked)").prop("enabled", true);
checked = false;
return;
}
else {
$("#<%=lstExposureValue.ClientID%> input:checkbox:not(:checked)").prop("disabled", true);
$("#<%=lstExposureValue.ClientID%> input:checkbox:not(:checked)").prop("checked", false);
checked = true;
}
}
});
});
});
here is the asp.net
<h3>
One</h3>
<asp:CheckBoxList ID="lstExposureValue" runat="server">
<asp:ListItem>Short-term exposure</asp:ListItem>
<asp:ListItem>Medium-term exposure</asp:ListItem>
<asp:ListItem>Unknown</asp:ListItem>
</asp:CheckBoxList>
so when unknown is selected the other 3 options has to be unselected and disabled.
And when unknown is unchecked then all options should be enabled.
Right now whatever the option i selecte it disables the other options and when i uncheck the same option it disables all the options any help anyone please.....
$("#<%=lstExposureValue.ClientID%> input:checkbox:not(:checked)").prop("disabled", true);
$("#<%=lstExposureValue.ClientID%> input:checkbox:not(:checked)").prop("checked", false);
You cannot change the state of disabled elements. Check it first, then disable the element.
this is how you do.
$(document).ready(function () {
var checked = false;
$('#<%=lstExposureValue.ClientID%> input:checkbox').click(function () {
var currentIdone = 'Unknown';
var currentId = $(this).next().html();
if (currentId == currentIdone) {
if (checked) {
$("#<%=lstExposureValue.ClientID%> input").removeAttr('disabled');
checked = false;
return;
}
else {
$("#<%=lstExposureValue.ClientID%> input").attr('checked', false);
$(this).attr('checked', true);
$('#<%=lstExposureValue.ClientID%> input:not(:checked)').attr('disabled', 'disabled');
checked = true;
}
}
});
});
It Works
Related
I have a form on FormAssembly, and I would like to stop someone submitting the form if they select the 'No' Radio Button for the question 'Are you an employer?'. I have put what I have so far in a jsfiddle.
JS:
$(document).ready(function() {
$('input#tfa_1904').click(function() {
if ($('#tfa_1904').is(':checked') {
submitButton.disabled = true;
}
else {
submitButton.disabled = false;
}
});
});
submitButton code:
document.addEventListener("DOMContentLoaded", function() {
var warning = document.getElementById("javascript-warning");
if (warning != null) {
warning.parentNode.removeChild(warning);
}
var oldRecaptchaCheck = parseInt('0');
if (oldRecaptchaCheck !== -1) {
var explanation = document.getElementById('disabled-explanation');
var submitButton = document.getElementById('submit_button');
if (submitButton != null) {
submitButton.disabled = true;
if (explanation != null) {
explanation.style.display = 'block';
}
}
}
});
In your case you don't need to check whether the radio button is checked as only one will be checked at a time. So, just capturing the click will suffice.
$(document).ready(function() {
$('input#tfa_1904').click(function() {
$('#submit_button').prop('disabled', true);
});
$('input#tfa_1903').click(function() {
$('#submit_button').prop('disabled', false);
});
});
Updated fiddle:
https://jsfiddle.net/h5r8gud1/8/
I have two menus in one form and a "select all" checkbox in each one. However, clicking one affect the two menus.
<div id="drop-wrapper">
<input type="checkbox" name="select-all-cat" id="select-all-cat" /><label for="cities-label" class="categories-label">Select all</label><br>
And here is the second one :
<div class="test-label">
<input type="checkbox" name="select-all" id="select-all"><label class="categories-label">Select all</label><br>
And the javascript :
// Select all
$('#select-all').click(function(event) {
if(this.checked) {
$(':checkbox').each(function() {
this.checked = true;
});
}
else {
$(':checkbox').each(function() {
this.checked = false;
});
}
});
// Select all categories
$('#select-all-cat').click(function(event) {
if(this.checked) {
$(':checkbox').each(function() {
this.checked = true;
});
}
else {
$(':checkbox').each(function() {
this.checked = false;
});
}
});
How can I separate the two lists, which are in the same form?
Add a context to the selectors matching each checkbox container. Assuming the group of checkboxes you want to act on are contained within the same div as each select all checkbox:
$('#select-all').click(function(event) {
if(this.checked) {
$(':checkbox', '.test-label').prop('checked', true);
...
$('#select-all-cat').click(function(event) {
if(this.checked) {
$(':checkbox', '#drop-wrapper').prop('checked', true);
...
Add class filter to all your $(':checkbox')
// Select all
$('#select-all').click(function(event) {
if(this.checked) {
$('input:checkbox[class=select-all]').each(function() {
this.checked = true;
});
}
else {
$('input:checkbox[class=select-all]').each(function() {
this.checked = false;
});
}
});
// Select all categories
$('#select-all-cat').click(function(event) {
if(this.checked) {
$('input:checkbox[class=select-all-cat]').each(function() {
this.checked = true;
});
}
else {
$('input:checkbox[class=select-all-cat]').each(function() {
this.checked = false;
});
}
});
Trying to disable a form submit button unless a selection has been made from a number of radio button groups. Have got this far, cant see why not working, button stays disabled:
<script>
$(function () {
$('#button').attr('disabled', true);
var disable = true;
$('input:radio').click(function () {
$('input:radio').each(function () {
if ($(this).is(':checked'))
disable = false;
else
disable = true;
});
});
$('#button').prop('disabled', disable == true ? true : false);
});
</script>
You should probably change the property inside the handler, and the right handler for a radio button would be onchange
$(function () {
var button = $('#button').prop('disabled', true);
var radios = $('input[type="radio"]');
var arr = $.map(radios, function(el) {
return el.name;
});
var groups = $.grep(arr, function(v, k){
return $.inArray(v ,arr) === k;
}).length;
radios.on('change', function () {
button.prop('disabled', radios.filter(':checked').length < groups);
});
});
FIDDLE
I have a script that does not allow submit until the form value is changed from the initial page-render.
Everything works, except for the radio buttons. When I try to check or uncheck them, they have no effect on the button.
Anyone see what is wrong? (I want to do a check to see if one or more of the checkboxes has changed from the initial page-render)
$(document).ready(function () {
var button = $('#submit-data');
$('input, select, checkbox').each(function () {
$(this).data('val', $(this).val());
});
$('input, select, checkbox').bind('keyup change blur', function () {
var changed = false;
$('input, select, checkbox').each(function () {
if ($(this).val() != $(this).data('val')) {
changed = true;
}
});
$('#submit-data').prop('disabled', !changed);
});
});
Edit:
Checkbox html:
<input checked="checked" id="contactemail" name="contactemail" type="checkbox" />
<input id="contactsms" name="contactsms" type="checkbox" />
<input checked="checked" id="contactphone" name="contactphone" type="checkbox" />
Edit 2:
New code from answer from Marikkani Chelladurai. It is almost working, but it only works if the checkbox is not checked initially, and then checked by the user. Link to JSFiddle
$(document).ready(function() {
var button = $('#submit-data');
$('input, select').each(function () {
$(this).data('val', $(this).val());
});
$('input[type=radio], input[type=checkbox]').each(function (e) {
$(this).data('val', $(this).attr('checked'));
}); //For radio buttons
$('input, select').bind('keyup change blur', function (e) {
var changed = false;
if (e.target.type == "radio" || e.target.type == "checkbox" ) {
if($(this).data('val') != $(this).attr('checked')){
changed = true;
}
} else {
if ($(this).val() != $(this).data('val')) {
changed = true;
}
}
$('#submit-data').prop('disabled', !changed);
});
});
Link to JSFiddle
You can handle radio buttons and checkboxes by a different way as follows
$('input, select').not('[type=checkbox]').each(function () {
$(this).data('val', $(this).val());
});
$('input[type=radio], input[type=checkbox]').each(function (e) {
$(this).data('val', $(this).is(':checked'));
}); //For radio buttons
$('input, select').bind('keyup change', function (e) {
var changed = false;
if (e.target.type == "radio" || e.target.type == "checkbox" ) {
console.log($(this).is(':checked'));
console.log($(this).data('val'));
if($(this).data('val') != $(this).is(':checked')){
changed = true;
}
} else {
if ($(this).val() != $(this).data('val')) {
changed = true;
}
}
As the comments say, radio buttons use the checked property. Pass in event to your each and check the target.type:
$('input, select, checkbox').each(function (e) {
if (e.target.type == "radio") {
//check radio
} else {
if ($(this).val() != $(this).data('val')) {
changed = true;
}
}
});
I am using Javascript to allow users to check all items in a form. However it is checking items even if they are disabled. Is there a way to make this only work on check boxes that are enabled?
<script>
$(document).ready(function () {
$('#selectall').on('click', function () {
$('.lv').prop('checked', isChecked('selectall'));
});
});
function isChecked(checkboxId) {
var id = '#' + checkboxId;
return $(id).is(":checked");
}
function resetSelectAll() {
// if all check box are selected, check the selectall checkbox
// and vice versa
if ($(".lv").length == $(".lv:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
if ($(".lv:checked").length > 0) {
$('#edit').attr("disabled", false);
} else {
$('#edit').attr("disabled", true);
}
}
</script>
You can combine the :not() and :disabled selectors:
$(".lv:not(:disabled)").prop("checked", isChecked("selectall"));