2

我有一个带有问题的表格。如果回答是，则会出现一组复选框；如果回答 no 没有任何反应。

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

此代码工作正常，但可以预先填写表格。如果是这样，它必须以相同的方式工作：如果选择是，则 sset 应该是可见的。

我知道我可以在单独的代码块中再次使用 jQuery 轻松地做到这一点（见下文），但我希望我可以通过稍微改变现有代码来做到这一点。

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');
}

预填充是用 smarty 完成的，看起来像下面的代码，我把它放在所有的单选和复选框标签中。

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

所以问题是，如何在不添加大量代码的情况下获得额外的功能？

谢谢！

4

4 回答 4

1

只需在DOM就绪事件中触发click 事件..

$(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
});

因此，根据预先填写的表格，将为选中的项目触发此事件。

检查小提琴

于 2012-11-28T18:25:44.240 回答
0

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

于 2012-11-28T18:13:27.353 回答
0

试试 jQuery 的toggleClass. 它使用每个备用调用添加/删除类。有关更多详细信息，请参阅http://api.jquery.com/toggleClass/。

于 2012-11-28T18:13:28.023 回答
0

只需将您的功能隔离在一个单独的块中：

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');
  }
}

然后，您可以直接调用它或单击它。

于 2012-11-28T18:23:54.877 回答