jQuery - Show/Hide Form Label & Field plus Disable Field using checkbox?

Question

I need to show and hide a form based on a checkbox (default off), making the form input and it's label hidden, plus not required. Right now, I'm just trying to sort out the display issues. I know I can disable the form with code like this:

$(document).ready(function() {

   $('#00NU00000049YHZ').change(function(){
   $('#company').prop('disabled' $('#companylbl').hide();, !$(this).is(':checked' $('#companylbl').show()));
   });

});

</script>

Sample of HTML form where I want the Company field to hide/show via a check box and also set it as required or not required depending on the state of the check box during later validation.

<!DOCTYPE html>
<html lang="en">
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8"> </META>
<HEAD>
</HEAD>
<BODY>

<form id="w2lForm" 

<label for="first_name">First Name</label><input  id="first_name" maxlength="40" name="first_name" size="20" type="text" /><br>

<label for="last_name">Last Name</label><input  id="last_name" maxlength="80" name="last_name" size="20" type="text" /><br>

This is for a Company:<input  id="00NU00000049YHZ" name="00NU00000049YHZ" type="checkbox" value="0"  /><br>

<label id="cmpnylbl" for="company">Company</label><input  id="company" maxlength="40" name="company" size="20" type="text" /><br>

<label for="street">Address</label><textarea id="street" name="street"></textarea><br>

<input type="submit" name="submit">

</form>

</BODY>
</HTML>

I'm using jQuery 1.11.1. Among lots of other things, I've tried putting a DIV tag around the Company Label and Input fields, then doing an add/remove class where the visibility was either "visible" or "hidden", but that didn't seem to work to hide the text for "Company" along with the input text field. Could someone please tell me what I need to do?

$('#company').prop("disabled" $('#companylbl').hide();, !$(this).is(':checked' $('#companylbl').show())); not sure how this would work, surely it just throws syntax error in the console? — GillesC
– GillesC, Commented Nov 21, 2014 at 22:05
There is some funky stuff going on in that JS code. You sure you copied it in right? — Clint Powell
– Clint Powell, Commented Nov 21, 2014 at 22:10
@gillesc That was a copy paste error from where I'd been editing. I fixed it immediately after posting. — crmprogdev
– crmprogdev, Commented Nov 21, 2014 at 22:17
It still is exactly the same and clearly by the answer accepted the JS was wrong. — GillesC
– GillesC, Commented Nov 22, 2014 at 10:59
Is now fixed. There were two places I had double quotes instead of single quotes. Apparently, I'd only fixed one of them after pasting that version of the code I'd been working with. Thank you for your diligence and attention to detail. — crmprogdev
– crmprogdev, Commented Nov 22, 2014 at 12:25

Elise Chant · Accepted Answer · 2014-11-22 01:56:39Z

1

A better solution http://jsfiddle.net/rrfr9oqv/:

<label id="cmpnylbl" for="company">Company<input  id="company" maxlength="40" name="company" size="20" type="text" /></label>


$(document).ready(function() {
    var $checkbox = $('#00NU00000049YHZ'),
        $companyLabel = $('#cmpnylbl'),
        $companyInput = $('#company');

    function toggleCompany(condition) {
        if (condition === true) {
            $companyLabel.show();
        } else {
            $companyLabel.hide();
            $companyInput.val('');    // clear
        }
        $companyInput.prop('disabled', !condition)
    }

    toggleCompany($checkbox.is(':checked'));

    $checkbox.change(function() {
        toggleCompany(this.checked);
    });
});

edited Nov 22, 2014 at 1:56

answered Nov 22, 2014 at 1:37

Elise Chant

5,2153 gold badges31 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

crmprogdev Over a year ago

Yours is a much more complete solution that will be helpful later when I add required for validation based on whether company is shown or not. Thank you.

lx42.de · Accepted Answer · 2014-11-21 22:32:46Z

1

jsfiddle => http://jsfiddle.net/793g5mxb/13/

$('#company_area').hide();
$('#00NU00000049YHZ').change(function(){
     $('#company_area').toggle();
});

edited Nov 21, 2014 at 22:32

answered Nov 21, 2014 at 22:18

lx42.de

4282 silver badges4 bronze badges

1 Comment

crmprogdev Over a year ago

Once I moved the <span> tag so that it just surrounded Company, that almost worked. Is there a way to get your example to work where the Company field will be hidden by default with the checkbox set to off?

Clint Powell · Accepted Answer · 2014-11-21 22:23:35Z

0

Try this (edited):

http://jsfiddle.net/hajq0nfa/2/

$(document).ready(function() {
   $('#00NU00000049YHZ').change(function(){
       var checked = $(this).is(':checked');
       $('#company_information').toggle(checked);
       $('#company').prop('disabled', !checked)
   }).change();
});

edited Nov 21, 2014 at 22:23

answered Nov 21, 2014 at 22:09

Clint Powell

2,4082 gold badges18 silver badges19 bronze badges

4 Comments

crmprogdev Over a year ago

"Company" disappears as desired, but the disabled input text area still displays. Is there a way to hide the text area as well? Big progress though from where I was at. :)

Clint Powell Over a year ago

Updated. Disables the input box as well as hiding everything.

Elise Chant Over a year ago

Toggle method won't accept checked like you have there, better to pass no argument. Also, your disabled field doesn't work as expected.

Clint Powell Over a year ago

It does according to jquery docs: api.jquery.com/toggle. If my disabled field doesn't work then why did you copy my code?

Elise Chant · Accepted Answer · 2014-11-22 01:57:57Z

0

I think it makes sense to hide the input field as well as the label and also to clear the value of the input box when unchecked.

Forked from @clint-powell's example:

<!-- wrap the input inside the label -->
<label id="cmpnylbl" for="company">Company<input  id="company" maxlength="40" name="company" size="20" type="text" /></label>


$(document).ready(function() {

    // don't show by default
   $('#cmpnylbl').hide();

   $('#00NU00000049YHZ').change(function(){     
       var checked = this.checked;       

       if (checked) {
           $('#cmpnylbl').show();
       } else {
           $('#cmpnylbl').hide();
           $('#company').val('');    // clear
       }

       $('#company').prop('disabled', !checked)

   });

});

edited Nov 22, 2014 at 1:57

answered Nov 21, 2014 at 22:46

Elise Chant

5,2153 gold badges31 silver badges37 bronze badges

Collectives™ on Stack Overflow

jQuery - Show/Hide Form Label & Field plus Disable Field using checkbox?

4 Answers 4

1 Comment

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related