By amariotti on

I came across this topic a while back that helped me disable certain fields on my Webform if the checkbox was checked. http://drupal.org/node/192280

Here's the jQuery I used:

<?php
drupal_add_js (
  '$(document).ready(function(){
    $("#edit-submitted-High-School-Student--c-TRUE").change(function(){
      if(this.checked) {
    $("#edit-submitted-Parent-or-Gaurdian-s-name--c").removeAttr("disabled");
    $("#edit-submitted-High-School-Name--c").removeAttr("disabled");
    $("#edit-submitted-HS-Grade-Level--c").removeAttr("disabled");
      }
      else {
    $("#edit-submitted-Parent-or-Gaurdian-s-name--c").attr("disabled", "disabled");
    $("#edit-submitted-High-School-Name--c").attr("disabled", "disabled");
    $("#edit-submitted-HS-Grade-Level--c").attr("disabled", "disabled");
      }
    });
  });'   
  ,'inline'
);
?>

This works great but only when I check and uncheck the checkbox. How can I make the 3 fields default to "disabled" and become "enabled" when the checkbox is selected.

⋅ Categories: Drupal 5.x

Comments

nevets’s picture

nevets commented

This should help

<?php
drupal_add_js (
  '$(document).ready(function(){
    $("#edit-submitted-High-School-Student--c-TRUE").change(function(){
      if(this.checked) {
    $("#edit-submitted-Parent-or-Gaurdian-s-name--c").removeAttr("disabled");
    $("#edit-submitted-High-School-Name--c").removeAttr("disabled");
    $("#edit-submitted-HS-Grade-Level--c").removeAttr("disabled");
      }
      else {
    $("#edit-submitted-Parent-or-Gaurdian-s-name--c").attr("disabled", "disabled");
    $("#edit-submitted-High-School-Name--c").attr("disabled", "disabled");
    $("#edit-submitted-HS-Grade-Level--c").attr("disabled", "disabled");
      }
    }).each(function() {
    	this.checked = 0;
    }).change();
  });'  
  ,'inline'
);
?>

The call to 'each' makes sure the check box is unchecked then the change event is invoked.

amariotti’s picture

amariotti commented

Awesome. Worked like a charm! Thanks so much!

davidw’s picture

davidw commented

Subscribe

Thanks for the code!!!!!!!

UNarmed’s picture

UNarmed commented

I am passing my variables via views ?name=[name] the code the author of this topic posted worked for me but when i use this code so that certain fields are disabled.

<?php
drupal_add_js (
  '$(document).ready(function(){
    $("#edit-submitted-product-type-2-Printer").change(function(){
      if(this.checked) {
    $("#edit-submitted-username").removeAttr("disabled");
      }
      else {
    $("#edit-submitted-username").attr("disabled", "disabled");
      }
    }).each(function() {
        this.checked = 0;
    }).change();
  });' 
  ,'inline'
);
?>

The field stays greyed out untill i click the corresponding radio button? I just cheched the code for the radio button and it reads as follows
<input type="checkbox" class="form-checkbox" checked="checked" value="Printer" id="edit-submitted-product-type-2-Printer" name="submitted[product_type_2][Printer]"> It contains the checked="checked" attribute but for some reason it does not display as checked in my browser and it also does not make the required field active ... help me please ... this is driving me nuts

amariotti’s picture

amariotti commented

So... does anyone have any ideas of how I would go about doing this if my initial checkbox is now turned into a dropdown menu. I know it's possible to do this just not sure which direction to go. Thanks.

nevets’s picture

nevets commented

Off the top of my head I think you need to change this.checked to this.value. The actual check will depend on the values of the drop down.

amariotti’s picture

amariotti commented

Instead of the checkbox it will be a dropdown with Yes and No as the options... defaulting to No.

I appreciate your help on this. You sound like you're the master at this stuff.

nevets’s picture

nevets commented

Assuming the field names are the same an you simply entered No and Yes (one per line) under options this should do the trick

<?php
drupal_add_js (
  '$(document).ready(function(){
    $("#edit-submitted-High-School-Student--c-TRUE").change(function(){
      if(this.value == 'yes') {
    $("#edit-submitted-Parent-or-Gaurdian-s-name--c").removeAttr("disabled");
    $("#edit-submitted-High-School-Name--c").removeAttr("disabled");
    $("#edit-submitted-HS-Grade-Level--c").removeAttr("disabled");
      }
      else {
    $("#edit-submitted-Parent-or-Gaurdian-s-name--c").attr("disabled", "disabled");
    $("#edit-submitted-High-School-Name--c").attr("disabled", "disabled");
    $("#edit-submitted-HS-Grade-Level--c").attr("disabled", "disabled");
      }
    }).each(function() {
        this.value = 'No';
    }).change();
  });' 
  ,'inline'
);
?>
amariotti’s picture

amariotti commented

I tried it and it doesn't appear to be working. The ids on my fields have changed slightly. Here is the code I tried:

drupal_add_js (
  '$(document).ready(function(){
    $("#edit-submitted-high-school-student--c").change(function(){
      if(this.value == 'Yes') {
    $("#edit-submitted-parent-or-gaurdian-s-name--c").removeAttr("disabled");
    $("#edit-submitted-high-school-name--c").removeAttr("disabled");
    $("#edit-submitted-hs-grade-level--c").removeAttr("disabled");
      }
      else {
    $("#edit-submitted-parent-or-gaurdian-s-name--c").attr("disabled", "disabled");
    $("#edit-submitted-high-school-name--c").attr("disabled", "disabled");
    $("#edit-submitted-hs-grade-level--c").attr("disabled", "disabled");
      }
    }).each(function() {
        this.value = 'No';
    }).change();
  });'
  ,'inline'
);
nevets’s picture

nevets commented

At least on Firefox the 'Yes' needs to be 'yes' (lowercase).

amariotti’s picture

amariotti commented

Here's a temporary link to the form... notice the High School section (i.e. Are you in High School?... etc.)

http://beta.datc.edu/request-info

Thanks again for your assistance. I must be missing something.

nevets’s picture

nevets commented

I don't see the js in the page, so maybe the input format for the markup (as per you reference link) is not PHP?

amariotti’s picture

amariotti commented

Just checked and it is in-fact there as a Markup Component with PHP filter turned on. I think this is a conflict with another module. I'll see what I can find out. Thanks again!

bribas’s picture

bribas commented

I got this working, Thanks!!! Is there any way to have this collapse a fieldset?

UNarmed’s picture

UNarmed commented

Would it be possible to make divs display:none with the above method? I dont just want to disable fields i want to hide there entire container so that the label also does not show?

Some example code of how i would go about this would be absolutely amazing!

UNarmed’s picture

UNarmed commented

Or even better would be to make a fieldset hidden?

nevets’s picture

nevets commented

You might want to check out Conditional Fields