Show/hide on a prefilled form

Question

I have a form with a question. If answered yes, a set of checkboxes appears; if answered no nothing happens.

<tr>
  <td>Question?</td>
  <td>
    <label><input name="selector" type="radio" value="yes" />Yes</label>
    <label><input name="selector" type="radio" value="no" />No</label>
    <br />
    <div id="subset">
      <label class="disabled"><input name="select1" type="checkbox" value="select1" />option1</label><br />
      <label class="disabled"><input name="select2" type="checkbox" value="select2" />option2</label><br />
      <label class="disabled"><input name="select3" type="checkbox" value="select3" />option3</label><br />
      <label class="disabled"><input name="select4" type="checkbox" value="select4" />option4</label>
    </div>
  </td>
</tr>

<script>
  $(document).ready(function(){
    $('input[name=selector]').click(function(){
      var selector = $(this).val();

      if (selector == 'no') {
        $('#subset label').addClass('disabled');
        $('#subset input').attr('disabled', 'disabled');
        $('#subset input').attr('checked', false);
      } else {
        $('#subset label').removeClass('disabled');
        $('#subset input').removeAttr('disabled');
      }
    });
  });
</script>

This code works fine but the form can be pre-filled. If so it has to work the same way: if yes is selected the sset should be visible.

I know I can easily do this with jQuery again in a separate block of code (see below) but I was hoping I could do this by only altering the existing code a little.

var selector = $('input[name=selector]:checked').val();
if (selector == 'no') {
  $('#subset label').addClass('disabled');
  $('#subset input').attr('disabled', 'disabled');
  $('#subset input').attr('checked', false);
} else {
  $('#subset label').removeClass('disabled');
  $('#subset input').removeAttr('disabled');
}

The pre-fill is done with smarty and looks something like the code below, which I put in all the radio and checkbox tags.

{{if $array.ELEMENT.answer=='VALUE'}} checked{{/if}}

So the question is, how can I get the extra functionality without adding a lot of code?

Thanks!

Answer 1

just trigger the click event .. in the DOM ready event..

$(function(){
   $('input[name=selector]').click(function(){
      var selector = $(this).val();

      if (selector == 'no') {
        $('#subset label').addClass('disabled');
        $('#subset input').attr('disabled', 'disabled');
        $('#subset input').attr('checked', false);
      } else {
        $('#subset label').removeClass('disabled');
        $('#subset input').removeAttr('disabled');
      }
    });
    $('input[name=selector]:checked')​.click();​
   // Will trigger the click event on page load
});

So based on the pre filled form this event will be triggered for the checked item.

Check Fiddle

Answer 2

您能否将点击处理程序重构为一个函数，并在点击和页面加载时调用该代码？

Answer 3

Try jQuery's toggleClass . It adds/removes the class with each alternate call. See http://api.jquery.com/toggleClass/ for more detail.

Answer 4

Just isolate your function in a separate block:

function processForm(){
  var selector = $('input[name=selector]:checked').val();

  if (selector == 'no') {
    $('#subset label').addClass('disabled');
    $('#subset input').attr('disabled', 'disabled');
    $('#subset input').attr('checked', false);
  } else {
    $('#subset label').removeClass('disabled');
    $('#subset input').removeAttr('disabled');
  }
}

You can then call it directly or within your click.