javascript - 复选框更改事件触发另一个必填字段

Question

我有一个表单，其中包含多个复选框字段以及每个复选框对应的注释字段。我动态创建这些字段。例如，复选框字段 tag1 将对应于 comments1。当选中该复选框时，我不想要求评论。当它没有被选中时，我想要求评论。

有时，这些字段是根据用户的最后输入预先填充的。换句话说，该复选框可能在页面加载时已被选中，也可能未被选中。我已设置逻辑来根据此将相应的评论字段构建为必需或不需要。

除了一种情况外，所有情况似乎都正常。当我选中该框然后取消选中该框时，该表单允许我不带任何评论地提交。以下是我尝试过的。

$(document).on('change', 'input[type=checkbox]', function() {
  var checkbox = $(this),
    otherInput = $('#comments' + this.id.replace('tag', ''));


  otherInput.removeProp('required', !checkbox.is(':checked'));
  if (!checkbox.not(':checked')){
    otherInput.prop('required',true);
  }
});

--------------------第二次尝试

$(document).on('change', 'input[type=checkbox]', function() {
  var checkbox = $(this),
    otherInput = $('#comments' + this.id.replace('tag', ''));

  otherInput.prop('required', !checkbox.not(':checked'));
  otherInput.removeProp('required', !checkbox.is(':checked'));

});

除了上面提到的情况外，这两种方法都解决相同的情况。请指教。

Answer 1

只需根据复选框状态切换“必需”属性

$(document).on('change', 'input[type=checkbox]', function() {
  var checkbox = $(this),
    otherInput = $('#comments' + this.id.replace('tag', ''));

  otherInput.prop('required', !checkbox.is(':checked'));

});

查看此JSFiddle