Have form grayed out until check box is checked?

Report · May 13, 2021

Hello we use Coldfusion 10 and I'm having issues with a form and having it be grayed out until a check box is selected. Here's a small part of the field I'm trying to do. What an I missing?

Any help would be great thanks.

Report · May 13, 2021

I would refer to the objects by an ID rather than CLASS so you can target specific objects and when you are reading and setting properties of objects use the JQuery .prop() function.

I assume you are loading the JQuery library in your page also.

There are probably many ways to do this but here is my version of the revised code.

<body>
<form action="TransactD.cfm" Target="body" method="post">
<input type="hidden" name="Receiveall" value="1">
<input type="submit" value="Receive all" disabled id="rabutton" onClick="this.form.submit();"> <input type="checkbox" name="checkbox-0" id="racb">
</form>
</body>
<script type="text/javascript">
$("#racb").on("change", function(e){
if($("#racb").prop("checked")){
$("#rabutton").prop('disabled', false);
} else {
$("#rabutton").prop('disabled', true);
}
});
</script>

Report · May 14, 2021

The Javascript is a bit confusing. That is because the submit button and the checkbox both belong to the same class, rabutton.

Suggestion for a solution: identify the submit button using the selector "input:submit", then simplify. My test code is as follows

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<script id="jsbin-javascript">
$(document).ready(function() {
	$(".rabutton").change(function(){
		if(this.checked){
			$("input:submit").attr("disabled", false);
		} else {
			$("input:submit").attr("disabled", true);
		}
	});
});
</script>


<form action="TransactD.cfm" Target="body" method="post">
<input type="hidden" name="Receiveall" value="1">
<input type="submit" value="Receive all" disabled class="rabutton" onClick="this.form.submit();">&nbsp;<input type="checkbox" name="checkbox-0" class="rabutton">
</form>
<head>

Report · May 19, 2021

Hi @taunnt ,

Is it working now?

Report · May 20, 2021

If you have multiple forms on the page, with multiple submit fields, then my solution might not work. A better solution would then be to uniquely identify the submit field concerned. For example, using id="submit_receive_all":

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<form action="TransactD.cfm" Target="body" method="post">
<input type="hidden" name="Receiveall" value="1">
<input type="submit" value="Receive All" disabled class="rabutton" onClick="this.form.submit();" id="submit_receive_all">&nbsp;<input type="checkbox" name="checkbox-0" class="rabutton">
</form>

<script id="jsbin-javascript">
$(document).ready(function() {
	$(".rabutton").change(function(){
		if(this.checked){
			$("#submit_receive_all").attr("disabled", false);
		} else {
			$("#submit_receive_all").attr("disabled", true);
		}
	});
});
</script>

Report · May 20, 2021

I copied everything over, Tried it again, and the form is still greyed out after box is check. Funny thing is I can get it to work fine with a button. Sense in Coldfusion it's useing a form I can't get it to work for some reason.

Report · May 20, 2021

This isn't a Coldfusion issue at all, because there's no Coldfusion involved. This is all HTML with javascript/jQuery.

I tried BKBK's sample code and can confirm it worked for me. I recommend that you enable the dev console on your browser and take a look to see if you're getting any javascript errors while trying to view the test page. In general I recommend having it open anytime you're trying to work on javascript code. It could be that something about your configuration is causing a javascript error. For example, the jQuery might be failing to download. If you're using IE11 and have the website in compatibility mode that will also cause it to fail because IE11 will then display the test page in IE5 mode which jQuery doesn't support.

Report · May 22, 2021

I copied everything over, Tried it again, and the form is still greyed out after box is check.
By @taunnt

You're talking about "the" form. But Suppose that the same form field is present in different code branches. Then you should change each one.

Take for example,

<cfif someCondition>
	<form action="TransactD.cfm" Target="body" method="post">
	<input type="submit" value="Receive All" disabled class="rabutton" onClick="this.form.submit();">&nbsp;<input type="checkbox" name="checkbox-0" class="rabutton">
	</form>
<cfelse>
	<form action="TransactD.cfm" Target="body" method="post">
	<input type="submit" value="Receive All" disabled class="rabutton" onClick="this.form.submit();">&nbsp;<input type="checkbox" name="checkbox-0" class="rabutton">
	</form>
</cfif>

Then you should make sure that BOTH submit buttons have an id:

<cfif someCondition>
	<form action="TransactD.cfm" Target="body" method="post">
	<input type="submit" value="Receive All" disabled class="rabutton" onClick="this.form.submit();" id="submit_receive_all">&nbsp;<input type="checkbox" name="checkbox-0" class="rabutton">
	</form>
<cfelse>
	<form action="TransactD.cfm" Target="body" method="post">
	<input type="submit" value="Receive All" disabled class="rabutton" onClick="this.form.submit();" id="submit_receive_all">&nbsp;<input type="checkbox" name="checkbox-0" class="rabutton">
	</form>
</cfif>

Report · May 20, 2021

If you want to block a "form" (ie, more than just a single output or a button), I recommend using a jQuery plugin like BlockUI. http://malsup.com/jquery/block/ (Another alternative solution would be to "hide" the section.)

We've used this plugin to display-but-block access to sections of a page until conditions are met. We've also used this plugin to prevent interaction while background actions are performed and/or the content is being refreshed.

(NOTE: Please be aware that blocking/disabling is usually purely cosmetic and can be bypassed by accessing the browser's console and adding inline overrides or disabling event handlers.)