Laravel Bootstrap 4 - 2 个选项使用按钮作为单选检查，根据选择显示相关字段

Question

正如您在下面看到的，我有（在我看来）两个样式精美的选项可供选择。这些是显示为 bootstrap 按钮的单选按钮。

下面的两个部分应该被隐藏，只有在选择了适当的选项时才会显示。

这就是我碰壁的地方。我尝试通过 CSS、JQuery、JavaScript onClick、Bootstrap collapse。没有任何效果。

Creating user view

data-toggle="buttons" 似乎是罪魁祸首。然而... 没有它 hiding/showing，折叠可以工作，但按钮不会保持在 selected/checked 状态。有了它，按钮的行为就很好，但是 showing/hiding 相关部分不起作用。

有没有人解决过类似问题或知道答案？

代码：

    <div class="row justify-content-center">
          <div class="form-group col-md-4">
            <label for="type">User type:</label>
            <div class="row justify-content-center btn-group-toggle" data-toggle="buttons">
              <label class="col-4 btn btn-outline-primary">
                <input type="radio" name="type" value="Employee" autocomplete="off">Employee
              </label>
              <label class="col-4  offset-1 btn btn-outline-primary">
                <input type="radio" name="type" value="External" autocomplete="off">External
              </label>
            </div>
          </div>
        </div>
        <div id="employee" class="row justify-content-center">
          <div class="form-group col-md-4">
            <label for="staff_number">Employee number:</label>
            <input type="text" class="form-control" name="staff_number">
            <small class="form-text text-muted">example: 7xxxxx</small>
          </div>
        </div>
        <div id="external" class="row justify-content-center">
          <div class="form-group col-md-4">
            <label for="company_name">Company name:</label>
            <input type="text" class="form-control" name="company_name">
            <small class="form-text text-muted">Who is this person working for?</small>
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="form-group col-md-4 text-center">
            <button type="submit" class="btn btn-success">Add user</button>
            <a href="{{route('users-list')}}"><button type="button" class="btn btn-dark">Back</button></a>
          </div>
        </div>
  </form>
</div>

编辑 2019 年 7 月 1 日

这很有趣。在桌面上创建了简单的 index.html 文件并将此代码粘贴到：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<h1>JQuery tests</h1>
<form>
Please choose but one: 
<input type="radio" name="portion_selection" value="button_one"/>
...or the other: 
<input type="radio" name="portion_selection" value="button_two"/>
  <div id="portion_one" style="display:none">
    Input the one: <input type="text" name="reference"/>
  </div>
  <div id="portion_two" style="display:none">
    Tell me the other: <input type="text" name="reference"/>
  </div>
</form>

<script type="text/javascript">
  $("input[name='portion_selection']:radio")
    .change(function() {
      $("#portion_one").toggle($(this).val() == "button_one");
      $("#portion_two").toggle($(this).val() == "button_two"); });
</script>

它完全符合我的要求。我假设以后可以设置单选按钮的样式。所以我将相同的代码粘贴到 blade 文件中，你猜怎么着？切换再次不起作用！！

我想我发现了冲突：

<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="{{ asset('js/app.js') }}" defer></script>
</head>

所以当我评论 Laravel 的 js 线收音机工作并切换相关部分时，但正如预期的那样，所有 Laravel Bootstrap 元素都在 [=20= 上中继] 不工作，即。我无法关闭警报。

Answer 1

解决方案：

<script src="{{ asset('js/app.js') }}" defer></script> 中的

defer 属性使 js 在整个页面加载后加载，我使用的脚本必须在此之前加载。

这对我有用。

Laravel Bootstrap 4 - 2 个选项使用按钮作为单选检查，根据选择显示相关字段

Laravel Bootstrap 4 - 2 options using buttons as radio checks, showing relevant field depending on choice

button

radio

laravel