Skip to main content
T
taunnt
Inspiring
May 13, 2021
Question

Have form grayed out until check box is checked?

  • May 13, 2021
  • 3 replies
  • 1513 views

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?

 

<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>


<script id="jsbin-javascript">
$(".rabutton").on("change", function(e){
if($(".rabutton").attr("checked")){
$(".submit").button("enable");
} else {
$(".submit").button("disable");
}

});
</script>

 

Any help would be great thanks.

    This topic has been closed for replies.

    3 replies

    James Moberg
    James Moberg
    Inspiring
    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.)

    BKBK
    BKBK
    Braniac
    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>

     

     

    BKBK
    BKBK
    Braniac
    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>
    T
    taunntAuthor
    Inspiring
    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.

    J
    John123
    Participating Frequently
    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();">&nbsp;<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>

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices