选中单选按钮时显示 div 并仅将必需属性添加到输入字段答案

【问题标题】：Show a div when radio button is checked and add required attribute to only the input fields选中单选按钮时显示 div 并仅将必需属性添加到输入字段
【发布时间】：2017-04-16 01:30:48
【问题描述】：

我想通过选中一个单选按钮来显示一个 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>

【问题讨论】：

@EbbySVHesse 您要显示或隐藏哪个 DIV？
@alfredo，我有 2 个 DIV
和
，2 单选按钮处理 2 个 DIV
@alfredo，当单选按钮：#private-office 被选中时，它应该显示 DIV #private-box，与其他单选按钮相同。
htr5 的答案中的代码显示了一种方法。要在 jquery 中设置属性，您可以执行类似的操作 $('#agency').prop('required', true);祝你好运！
@alfredo，当 DIV 处于活动状态时，REQUIRED 属性会添加到输入字段中。

【解决方案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'"

然后反转每个按钮的块/无显示属性。

结果：

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

【讨论】：

快到了。还向他展示如何为正在显示的输入设置所需的属性，并在它们不显示时隐藏它们。
@htr5，感谢您的回答，它适用于 SHOW 和 HIDE 收音机
@alfredo，是的，SHOW / HIDE div 现在可以了，我如何在只有 ACTIVE div 的输入字段中添加必需项
做一些类似 $('#agency').prop('required', true);显示机构输入和 $('#agency').prop('required', false) 隐藏它。我认为最好将您的 javascript 与您的 HTML 分开，因此最好不要在输入中包含它，而是像您在问题中一样将其分开。我不想取消 @hrt5 的功劳，所以我会让他为你完成答案。 :)

【解决方案2】：

使用此 CSS 开始隐藏 DIVS：

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

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

$(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); 
        });
    });
});

【讨论】：

REQUIRED 不起作用，因为表单仍然提交，输入字段中没有任何信息，并且当您预览代码时，ACTIVE DIV 中没有添加必需的属性。
对不起，我有一些错别字，错过了一些代码。看看这是否适合你。

【解决方案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>

【讨论】：

感谢您的支持，但我仍然没有得到我想要的。收音机运行良好，但没有在 ACTIVE RADIO DIV 的输入字段中添加必需的属性。
Yes..在浏览器中使用检查器工具，您会看到它有一个名为 required 的属性
那为什么必填字段为空时表单仍然提交？...也许某处有问题。