如何将.toggle与表单错误集成？

Question

如果布尔字段为true，我想显示一个包含其他字段的div（仅当为true时才需要），如果bool为false，则隐藏div。目前，此代码可显示和隐藏div：

$('.hidden-div').hide();

    $('#id_bool').change(function() {
       $('.hidden-div').toggle(this.true);
    });

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

      <form method="post" novalidate>

        <div class='visible-div'>
          <input id="id_bool" type="checkbox"/>
        </div>

        # Hidden fields upon initial rendering of form,
        # but appear if bool is selected true.
        # If bool is true, these fields are required.

        <div class='hidden-div'>
          <input id="id_required" type="text" required/>
        </div>
        
        <div class='visible-div'>
          <input type="submit" value="Submit"/>
        </div>
        
      </form>

bool的默认值为false，因此当第一次呈现表单时，div被隐藏。当您检查布尔值true并尝试提交表单而不填写其他字段时，就会出现问题。

然后，该表单隐藏了div，即使需要隐藏字段，也仅显示正常显示字段的错误。它还保留了布尔值的真实值，但是hidden-div是隐藏的。然后，如果您检查bool为false，则将再次显示hidden-div，因此角色将反转，这不是我想要的。

有关如何解决此问题的任何提示？