Question

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

有时，字段是根据用户的最后输入预先填充的。换句话说，当页面加载时可能已经检查了复选框，或者可能不是。我有逻辑设置来构建相应的注释字段为 required 或基于此不需要。

除了一个以外，一切情况似乎都有效。当我勾选方框然后取消选中该框时，该表单允许我提交而不发表评论。以下是我的尝试。

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

只需切换所需的＆＃39;属性基于复选框状态

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

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

});

请参阅此JSFiddle

Answer 2

按下“提交”按钮后，进行验证：

伪码：

onSubmitPressed: function(){
   if(checkbox is checked){
      // alert user field is required;
      return false;
   }else{
      return true;
   }

Answer 3

看起来我有一些错误的语法，但它没有抛出错误。我改变了我的第一次尝试：

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

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

  if ($(this).is(':not(:checked)')){
    otherInput.prop('required',true);
    console.log('working');
  }
});

现在根据选中或未选中的复选框添加和删除所需属性。

复选框更改事件以触发需要的另一个字段

3 个答案: