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
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 a script which check when two textfields are not empty it does automatic submission. it picks the variables from the localstorage and places them in the textfields.
if (localEmail != null && localPwd != null) {
$('#form1').submit();
}
and i also i have a script which disables the submit button when all textfields are not filled.
$(document).ready(function (){
var $input = $('#form1 input:text'),
$register = $('#button_id');
$register.attr('disabled', true);
$input.keyup(function() {
var trigger = false;
$input.each(function() {
if (!$(this).val()) {
trigger = true;
}
});
trigger ? $register.button('disable') : $register.button('enable');
});
});
now my problem is when the page loads for the second and subsequent times and there are variables from the localstorage in the textfields, the submit button still remains disabled and the automatic submission fails. Now i want the button to remain active when there are variable in it so the automatic submission can be done
In document ready do an additional check for input values and disable the button
$(document).ready(function () {
var $input = $('#form1 input:text'),
$register = $('#button_id');
$input.each(function () {
if (!$(this).val()) {
$register.attr('disabled', true);
return false;
}
});
$input.keyup(function () {
var trigger = false;
$input.each(function () {
if (!$(this).val()) {
trigger = true;
}
});
trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
});
});
$(document).ready(function () {
var $input = $('#form1 input:text'),
$register = $('#button_id');
$input.each(function () {
if (!$(this).val()) {
$register.attr('disabled', true);
return false;
}
});
$input.keyup(function () {
var trigger = false;
$input.each(function () {
if (!$(this).val()) {
trigger = true;
}
});
trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form id="form1">
<input type="text" />
<input type="text" />
<button id="button_id">button</button>
</form>
The reason why you are not achieving the desired behavior is because you are only updating the button's disabled property when a change event is fired from the input element(s), which are not fired by default upon page load.
The solution is to therefore move the function involving updating the button's status into a separate one, which we will call upon runtime (e.g. DOM ready) and then again when the change event is fired on element(s) of interest:
var updateButton = function() {
var trigger = false;
$input.each(function() {
if (!$(this).val()) {
trigger = true;
}
});
trigger ? $register.button('disable') : $register.button('enable');
};
// Update button status on DOM ready
updateButton();
// Update button status on keyup
$input.keyup(updateButton);
On a side note, please use .prop() when dealing with binary attributes:
$register.prop('disabled', true);
this should work
$input.each(function() {
if (!$(this).val()) {
trigger = true;
}
under document ready function.
$(document).ready(function (){
var $input = $('#form1 input:text');
$register = $('#button_id');
$register.prop('disabled', true);
//$register.attr('disabled', true);
$('#button_id').on('click',function(){alert('hi');});
function checkInputs(){
$input.each(function(e) {
if (!$(this).val().length < 1) {
trigger = true;
} else
{trigger = false;}
});
trigger ? $register.prop('disabled',false) : $register.prop('disabled',true);
}
checkInputs();
$('#form1 input:text').on('keyup',function(){checkInputs();});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
<input/>
<input />
<button type="button" id="button_id" >Submit</button>
</form>
I have a simple script to count all of the .checkboxes that have been checked. When they each are checked individually the count works just fine, but when I select the .checkall checkbox, it doesn't count. I did try changing the $checkboxes variable to input[type=checkbox] which counted incorrectly.
jsfiddle - http://jsfiddle.net/darcyvoutt/rv4j8ghn/
Code:
// Select all checkboxes
$(document).ready(function() {
$('.checkall').click(function(event) {
if (this.checked) {
$('.checkboxes').each(function() {
this.checked = true;
});
} else {
$('.checkboxes').each(function() {
this.checked = false;
});
}
});
});
// Count Checkboxes
$(document).ready(function(){
var $checkboxes = $('.checkboxes');
var checkall = $('.checkall:checked');
$checkboxes.change(function(){
var count = $checkboxes.filter(':checked').length;
$('.counted').val(count);
});
});
$(document).ready(function () {
$('.checkall').click(function (event) {
$('.checkboxes').prop('checked', this.checked);
var $checkboxes = $('.checkboxes');
var count = $checkboxes.filter(':checked').length;
$('.counted').val(count);
});
});
You have to add checkbox checked count code inside checkall click event.
Demo:
http://jsfiddle.net/h7zprokf/2/
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
I am designing a html page.
I want to show a confirmation msg on changing a drop down element using jquery or javascript.
Please help to do this.
I have code which will ask confirmation. On selecting cancel it will not select previous item of Drop down.
$("#dropdownId").change(function(e)
{
if($(this).val() == "40")
{
if(confirm("Are you sure"))
return true;
else
return false;
}
});
Thanks
You should be able to store the previous value on the click event and set it back on the change event:
var setLastSelected = function(element) {
$(element).data('lastSelected', $(element).find("option:selected"));
};
$("select").each(function () {
setLastSelected(this);
});
$("select").change(function(){
if(confirm("Are you sure")) {
setLastSelected(this);
return true;
}
else {
$(this).data('lastSelected').attr("selected", true);
return false;
}
});
See: http://jsfiddle.net/w9JYX/14/
Update: I updated the code to work more generically on a set of dropdown controls and also removed the click handler.
Here's a bit tighter solution along the same lines without having to create global variables or other functions:
$('#dropdownId')
.on('focus', function () {
$(this).data("prev", $(this).val());
})
.change(function () {
if (confirm('Are you sure?')) {
//normal case where the dropdown changes
$(this).data("prev", $(this).val());
} else {
//if the user doesn't confirm reset the dropdown back to what it was
$(this).val($(this).data("prev"));
}
});
var previous_option = $('#dropdownId option:selected');
$("#dropdownId").change(function(e){
var $this = $(this),
selected = $this.find('option:selected');
if($this.val() == "40"){
if(confirm("Are you sure")){
previous_option = selected;
return true;
} else{
selected.removeAttr('selected');
previous_option.attr('selected', 'selected');
}
} else{
previous_option = selected;
}
});
Usage for ASP.NET page:
$("#<%= dropdownId.ClientID %>")
.on('focus', function () {
$(this).data("prev", $(this).val());
})
.change(function () {
if (confirm('Are you sure?')) {
$(this).data("prev", $(this).val());
} else {
$(this).val($(this).data("prev"));
}
});