Question

我有这个单选表格，当选中单选时，它使特定输入类型的文本处于活动状态。我希望活动的输入需要提交表单，但是我现在在JS中非常糟糕。如果有人可以帮助的话，将不胜感激！

这是我的代码：

<div class=" bottommargin-sm">
    <label>Platforme<small class="text-danger">*</small> : </label>
    <div class="btn-group btn-group-toggle nav" data-toggle="buttons">
        <a href="#attending-tab-1" class="btn btn-outline-youtube px-4 t600 ls0 nott si-youtube flex-fill" data-toggle="tab">
            <input type="radio" name="choice-platform" required value="0"><i class="icon-youtube"></i> Youtube
        </a>
        <a href="#attending-tab-2" class="btn btn-outline-soundcloud px-4 t600 ls0 nott si-soundcloud flex-fill" data-toggle="tab">
            <input type="radio" name="choice-platform" id="template-wedding-attending-no" value="1" required><i class="icon-soundcloud1"></i> Soundcloud
        </a>
    </div>

    <div class="tab-content">
        <div class="tab-pane bg-light p-4 mt-2" id="attending-tab-1">
            <div class="row">
                <input type="text" name="platform1" class="form-control">
            </div>
        </div>
        <div class="tab-pane bg-light p-4 mt-2" id="attending-tab-2">
            <div class="row">
                <input type="text" name="platform2" class="form-control">
            </div>
        </div>
    </div>
</div>

Answer 1

您是否要根据用户选择选项使HTML表单字段为必填项。然后希望这对您有用。

function updateRequirement() {
  var form = document.forms[0];
  var radios = document.getElementsByName('option');
  var selectedValue;
  for( i = 0; i < radios.length; i++ ) {
      if( radios[i].checked ) {
        selectedValue = radios[i].value;
      }
  }
  if(selectedValue === 'yes') {
    document.getElementById('non-mandatoryfield').required = true;
  } else {
    document.getElementById('non-mandatoryfield').required = '';
  }
}

<form>
  Make optional field mandatory <br />
  <div id="options">
    <input type="radio" name="option" value="yes" onchange="updateRequirement()"> Yes<br>
    <input type="radio" name="option" value="no" onchange="updateRequirement()"> No<br>
  </div>
  <br />
  First name: (Required Always)<br />
  <input type="text" required name="firstname" value="" />
  <br />
  Last name: (Optional Always)<br />
  <input type="text" id="non-mandatoryfield" name="lastname" value="" />
  <br /><br />
  <input type="submit" value="Submit" />
</form>

Answer 2

这是js代码

$("#template-wedding-attending-no").on("checked", function () {
    $("#attending-tab-1").prop(true);
})

Js（如果处于活动状态），则需要输入

2 个答案: