选中单选按钮时显示div，并仅向输入字段添加必需的属性

Question

我想通过选中一个单选按钮来显示DIV，当该DIV可见时，将使用jquery将所需属性添加到其输入字段，但如果未选中该单选按钮并且隐藏了DIV，则还会删除必需属性。但我不知道该怎么做

​

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

Answer 2

使用此CSS从隐藏的DIVS开始：

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

使用此JQuery代码创建事件并设置/删除输入字段上的"required“属性。

$(document).ready(function(){
    $(function() {
        $('#private_office').on('click', function() {
            $('#private-box').css('display', 'block');
            $('#private-box').prop('required', true); 
            $('#ministry').prop('required', true);          
            $('#agency').prop('required', true);    

            $('#public-box').css('display', 'none');   
            $('#public-box').prop('required', false); 
            $('#ministry_region').prop('required', false);          
            $('#ministry_district').prop('required', false);    
        });

        $('#public_office').on('click', function() {
            $('#private-box').css('display', 'none');
            $('#private-box').prop('required', false);
            $('#ministry').prop('required', false);         
            $('#agency').prop('required', false);   

            $('#public-box').css('display', 'block');    
            $('#public-box').prop('required', true);    
            $('#ministry_region').prop('required', true);           
            $('#ministry_district').prop('required', true); 
        });
    });
});

Answer 3

​

/*THIS IS THE CODE I USE TO SHOW AND HIDE THE DIV BUT WANTS A BETTER AND SIMPLE WAY OF DOING IT */
var keys = {
  'private_office': '#private-box',
  'public_office': '#public-box'
}
$('input[name=acc-type]').on('click', function() {
  that = $(this)
  $('input[name=acc-type]').each(function() {
    if ($(this) != that) {
      $(keys[this.id]).css({
        'display': 'none'
      });
      $(this).removeAttr("REQUIRED")
    }
  }) //end each
  $(keys[this.id]).css({
    'display': 'block'
  });
  $(this).attr({
    "REQUIRED": true
  })
}).trigger('init-post-format');

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

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

​