Member Avatar for genzoman

Hi, all. This is using jquery by the way. I have a list of ethnicities on a form for a person to enter that are checkboxes. One option is 'Other, specify'. When 'other specify' is checked, I would like a text box to pop up and disable the other boxes (if you pick other, you can't pick from the previous ethnicities). If 'other, specify' is unchecked, I would like for the text box to dissappear and re-enable the checkboxes. I had the appearing box working just using JS. I can't seem to get the syntax right to use the toggle feature of jquery to make the box dissappear when unclicked. thanks in advance, you guys are great!

JQUERY

<script type="text/javascript">
      $(function(){
        
	$('#other').click(function()
	{

$('#otherrace').toggle(
          function(event) {
            $(event.target).css('visible');
          },
          function(event) {
            $(event.target).css('hidden');
          }
        );
      });
    </script>

HTML
<input type="checkbox" name="race" value="asian" />Asian<br />
<input type="checkbox" name="race" value="hawaii" />Native Hawaiian or other Pacific Islander<br />
<input type="checkbox" name="race" value="noanswer" />Choose not to answer<br />
<input type="checkbox" name="race"  id="other"value="other" />Other, specify<br />
<div style="visibility:hidden" id="race"><input type="text" name="fname" size="25" maxlength="25" id="otherrace" /></div>
Edited by genzoman because: n/a
  • 2 Contributors
  • 3 Replies
  • 677 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by genzoman

Dani AI

Generated

Common cause: the original code mixes up two different jQuery things — the old function-overload form of .toggle(...) (not for visibility) and CSS usage (css('visible') is not valid). For a robust solution use the change event, read the checkbox state with .prop('checked'), show/hide the text-field wrapper with toggle(showBool) or show()/hide(), and disable the other inputs with .prop('disabled', true/false). Use change rather than click so keyboard toggles are handled.

A simple, modern pattern:

  • keep the text input inside a wrapper div so it can be shown/hidden without changing the input markup,
  • listen for change on the race inputs,
  • when “Other” is checked, show the wrapper, focus the text field, and disable (and uncheck) the other race inputs,
  • when “Other” is unchecked, hide the wrapper and clear the text field so nothing unexpected is submitted.

Example implementation (keeps IDs from the thread but uses modern APIs and accessibility attributes):

$(function(){
  var $other     = $('#other'),
      $otherText = $('#otherrace'),
      $wrapper   = $('#race'),
      $choices   = $('input[name="race"]');

  function syncOther() {
    var isOther = $other.prop('checked');
    $wrapper.toggle(isOther);                    // display on/off
    $choices.not($other).prop('disabled', isOther).prop('checked', false);
    $wrapper.attr('aria-hidden', !isOther);      // help screen readers
    if (isOther) { $otherText.focus(); } else { $otherText.val(''); }
  }

  $choices.on('change', syncOther);
  syncOther(); // initialize on page load
});

Notes: as pointed out, radio buttons are preferable when the options are mutually exclusive. If checkboxes must be used for business reasons, the snippet above enforces the exclusivity client-side but server-side validation should still reject contradictory input. Add proper <label for="..."> markup and ensure the wrapper is hidden via CSS (e.g., display:none) by default for progressive enhancement.

Recommended Answers

All 3 Replies

Member Avatar for genzoman

any ideas to help? can't figure her out! :/

Member Avatar for Airshow

Genzoman,

Toggle acts on the css "display" property, not "visibility".

As the categories are mutually exclusive, radio buttons are more appropriate than checkboxes. This also allows for much simpler javascript as radio buttons are self managing (no need to disable/enable).

In addition, move style="visibility:hidden;" from the div tag to the "otherrace" input tag.

<input type="radio" name="race" value="asian" />Asian<br />
<input type="radio" name="race" value="hawaii" />Native Hawaiian or other Pacific Islander<br />
<input type="radio" name="race" value="noanswer" />Choose not to answer<br />
<input type="radio" name="race" value="other" id="other" />Other, specify<br />
<div id="race"><input style="visibility:hidden;" type="text" name="fname" size="25" maxlength="25" id="otherrace" /></div>

Now, the javascript (jQuery) is very simple:

$(document).ready(function() {
	$('[name*="race"]').click(function() {
		$('#otherrace').css('visibility', $('#other').attr('checked') ? 'visible':'hidden');
	});
});

If you choose to show/hide with css "display" instead of "visibility", then use this instead:

$(document).ready(function() {
	$('[name*="race"]').click(function() {
		$('#otherrace2').toggle($('#other').attr('checked'));
	});
});

Airshow

Edited by Airshow because: n/a
Member Avatar for genzoman

works great, thanks so much!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.