Проблема выбора радиокнопок при загрузке вкладок и таблеток

Question

У меня есть 2 панели вкладок и 2 таблетки, которые показывают и скрывают их (отсюда я использовал пример начальной загрузки 4 таблетки: https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior). Все заработало как положено.

После того, как я поместил их в тег form, я попытался использовать радиокнопки на таблетках, чтобы узнать, какая вкладка была выбрана. Проблема в том, что нажатие на радиокнопки не выбирает их. Я пробовал много комбинаций между тегами label или a, но безуспешно.

Вот пример:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<form action="http://jkorpela.fi/cgi-bin/echo.cgi" method="post">
<div class="container">
  <div class="row">
    <div class="col-auto">
      <div class="nav flex-column nav-pills btn-group btn-group-toggle" role="tablist" aria-orientation="vertical">
        <a href="#pill-local" class="nav-item nav-link btn-light mb-0" id="pill-local-tab" data-toggle="tab">
                <input type="radio" name="docsrc" id="docsrc_local" value="local" class="form-check-input" checked="checked">
                <label for="docsrc_local">Local</label>
              </a>
        <a href="#pill-internet" class="nav-item nav-link btn-light mb-0 active show" id="pill-internet-tab" data-toggle="tab">
                <input type="radio" name="docsrc" id="docsrc_internet" value="internet" class="form-check-input">
                <label for="docsrc_internet">Internet</label>
              </a>
      </div>
    </div>
    <div class="col">
      <div class="tab-content" id="v-pills-tabContent">
        <div class="tab-pane fade" id="pill-local" role="tabpanel" aria-labelledby="pill-local-tab">
          <div class="form-group row pb-3">
            <label class="col-sm-3 col-md-2 col-form-label" for="document_file">File:</label>
            <div class="col-sm-9 col-md-10 mb-3">
              <input class="form-control" type="file" name="document[file]" id="document_file">
            </div>
          </div>
        </div>
        <div class="tab-pane fade active show" id="pill-internet" role="tabpanel" aria-labelledby="pill-internet-tab">
          <div class="form-group row pb-3">
            <label class="col-sm-3 col-md-2 col-form-label" for="document_xfile">URL:</label>
            <div class="col-sm-9 col-md-10 mb-3">
              <input value="http://example.com/file.zip" class="form-control" type="text" name="document[xfile]" id="document_xfile">
            </div>
          </div>
        </div>
      </div>
    <input type="submit" value="Start" class="btn btn-primary">
    </div>
  </div>
  </div>
</form>

Answer 1

Мне удалось установить свойство checked для ввода при нажатии на ссылку. Как то так:

  $('#pill-local-tab').click(function() {
    $('input#docsrc_internet').prop('checked', false);
    $('input#docsrc_local').prop('checked', true);
  });
  $('#pill-internet-tab').click(function() {
    $('input#docsrc_local').prop('checked', false);
    $('input#docsrc_internet').prop('checked', true);
  });

Answer 2

Переключатели не проверяются из-за этого кода :

e.preventDefault()

Чтобы решить эту проблему, удалите data-toggle="tab" из тега привязки и присвойте ему тот же класс.

Я даю variable класс для привязки тега и добавляю jquery для отображения вкладки.

$('.variable').click(function () {
   $(this).tab('show');
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<form action="http://jkorpela.fi/cgi-bin/echo.cgi" method="post">
  <div class="container">
    <div class="row">
      <div class="col-auto">
        <div class="nav flex-column nav-pills btn-group btn-group-toggle" role="tablist" aria-orientation="vertical">
          <a href="#pill-local" class="nav-item nav-link btn-light mb-0 variable" id="pill-local-tab">
            <input type="radio" name="docsrc" id="docsrc_local" value="local" class="form-check-input" checked="checked">
            <label for="docsrc_local">Local</label>
          </a>
          <a href="#pill-internet" class="nav-item nav-link btn-light mb-0 active show variable" id="pill-internet-tab">
            <input type="radio" name="docsrc" id="docsrc_internet" value="internet" class="form-check-input">
            <label for="docsrc_internet">Internet</label>
          </a>
        </div>
      </div>
      <div class="col">
        <div class="tab-content" id="v-pills-tabContent">
          <div class="tab-pane fade" id="pill-local" role="tabpanel" aria-labelledby="pill-local-tab">
            <div class="form-group row pb-3">
              <label class="col-sm-3 col-md-2 col-form-label" for="document_file">File:</label>
              <div class="col-sm-9 col-md-10 mb-3">
                <input class="form-control" type="file" name="document[file]" id="document_file">
              </div>
            </div>
          </div>
          <div class="tab-pane fade active show" id="pill-internet" role="tabpanel" aria-labelledby="pill-internet-tab">
            <div class="form-group row pb-3">
              <label class="col-sm-3 col-md-2 col-form-label" for="document_xfile">URL:</label>
              <div class="col-sm-9 col-md-10 mb-3">
                <input value="http://example.com/file.zip" class="form-control" type="text" name="document[xfile]" id="document_xfile">
              </div>
            </div>
          </div>
        </div>
        <input type="submit" value="Start" class="btn btn-primary">
      </div>
    </div>
  </div>
</form>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>