jquery - 选中单选按钮时显示一个 div，并将所需属性仅添加到输入字段

Question

我想通过选中单选按钮来显示 DIV，当该 DIV 可见时，将使用 jquery 将 REQUIRED 属性添加到其 INPUT 字段，但是如果未选中单选按钮并且隐藏 DIV，则 REQUIRED 属性是也删除了。但我不知道如何完成它

$(function() {
  $('input[name=post-format]').on('click init-post-format', function() {
    $('#private-box').toggle($('#private_office').prop('checked'));
  }).trigger('init-post-format');

  $('input[name=post-format]').on('click init-post-format', function() {
    $('#public-box').toggle($('#public_office').prop('checked'));
  }).trigger('init-post-format');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-top">
  <div class="form-group">
    <label class="btn btn-warning">
    <input type="radio" name="acc-type" value="private_office" id="private_office"> Private Office
    </label>

    <label class="btn btn-warning">
    <input type="radio" name="acc-type" value="public_office" id="public_office"> Public Office
    </label>
  </div>


  <div id="private-box">
    <div class="form-group">
      <label for="ministry">Ministry</label>
      <input type="text" id="ministry" name="ministry" class="form-control">
    </div>

    <div class="form-group">
      <label for="ministry">Agency </label>
      <input type="text" id="agency" name="agency" class="form-control">
    </div>
  </div>

  <div id="public-box">
    <div class="form-group">
      <label for="ministry">State/ Region</label>
      <input type="text" id="ministry_region" name="ministry_region" class="form-control">
    </div>

    <div class="form-group">
      <label for="ministry">District</label>
      <input type="text" id="ministry_district" name="ministry_district" class="form-control">
    </div>
  </div>
</div>

Answer 1

添加以下 CSS 以默认隐藏两个 div:

#private-box, #public-box {
    display: none;
}

我假设您一次只希望显示一个 div，因此将以下内容添加到每个输入单选按钮:

onchange="document.getElementById('private-box').style.display='block';document.getElementById('public-box').style.display='none'"

然后反转每个按钮的 block/none 显示属性。

结果:

#private-box, #public-box {
  display: none;
}

<div class="form-top">
<div class="form-group">							

<label class="btn btn-warning">
<input type="radio" onchange="document.getElementById('private-box').style.display='block';document.getElementById('public-box').style.display='none'" name="acc-type" value="private_office" id="private_office"> Private Office
</label>

<label class="btn btn-warning">
<input type="radio" onchange="document.getElementById('public-box').style.display='block';document.getElementById('private-box').style.display='none'" name="acc-type" value="public_office" id="public_office"> Public Office
</label>
</div>


<div id="private-box">
<div class="form-group">
<label for="ministry">Ministry</label>
<input type="text" id="ministry" name="ministry" class="form-control">
</div>

<div class="form-group">
<label for="ministry">Agency </label>
<input type="text" id="agency" name="agency" class="form-control">
</div>
</div>

<div id="public-box">
<div class="form-group">
<label for="ministry">State/ Region</label>
<input type="text" id="ministry_region" name="ministry_region" class="form-control">
</div>

<div class="form-group">
<label for="ministry">District</label>
<input type="text" id="ministry_district" name="ministry_district" class="form-control">
</div>
</div>
</div>

在这里玩:https://jsfiddle.net/j75kq4xp/