javascript - PHP - 设置选项时启用按钮

Question

我有一个带有两个单选按钮和一个选择的表单。
我需要在选择单选按钮或选择中的选项之一后立即启用提交按钮。同时我需要禁用其他一切。
假设我们有两个单选按钮和三个选项。
如果我在选择中选择一个选项，我想启用提交按钮并禁用单选按钮。
如果我选择其中一个单选按钮，我想启用提交按钮并禁用选择。

这是 HTML 代码:

<form class="form-horizontal" method="post" data-toggle="validator">


  <div class="form-group" has-feedback>
    <label class="col-sm-3 control-label">
      RADIO BUTTONS
    </label>
    <div class="cc-selector-2 col-sm-6 ">
      <input type="radio" name="radio" />
      <input type="radio" name="radio" />

    </div>
    <div class="col-sm-3">
      <div class="help-block with-errors"></div>
    </div>
  </div>

  <br>

  <div class="form-group" has-feedback>
    <label class="col-sm-3 control-label">
      SELECT
    </label>
    <div class="col-sm-6">
      <select class="form-control">
        <option value=""> One </option>
        <option value=""> Two </option>
        <option value=""> Three </option>

      </select>
    </div>
  </div>
  <br>
  <div class="form-group" has-feedback>
    <div class="col-sm-6 col-sm-offset-3">
      <button type="submit" class="btn btn-primary">
        SUBMIT
      </button>
    </div>
  </div>

</form>

我尝试将请求添加到 radio 和选择中，但它不起作用......
显然我可以用 js 来做到这一点，但我想知道是否有一个更简单的解决方案......

Answer 1

将 ID 添加到您的表单、单选按钮、选择、按钮并使用 jQuery，如下所示:

  $(document).ready(function() {
    $('#myFormSubmit').attr("disabled", true);

    $('[name=radio]').change(function () {
      $('#myForm :input').attr("disabled", true);
      $('#myFormSubmit').attr("disabled", false);
    });

    $('#mySelect').change(function() {
      $('#myForm :input').attr("disabled", true);
      $('#myFormSubmit').attr("disabled", false);
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" method="post" data-toggle="validator" id="myForm">
  <div class="form-group" has-feedback>
    <label class="col-sm-3 control-label">
      RADIO BUTTONS
    </label>
    <div class="cc-selector-2 col-sm-6 ">
      <input type="radio" name="radio" />
      <input type="radio" name="radio" />
    </div>
    <div class="col-sm-3">
      <div class="help-block with-errors"></div>
    </div>
  </div>
  <br>
  <div class="form-group" has-feedback>
    <label class="col-sm-3 control-label">
      SELECT
    </label>
    <div class="col-sm-6">
      <select class="form-control" id="mySelect" name="mySelect">
        <option disabled="true" selected="true">-- Select option --</option>
        <option value=""> One </option>
        <option value=""> Two </option>
        <option value=""> Three </option>
      </select>
    </div>
  </div>
  <br>
  <div class="form-group" has-feedback>
    <div class="col-sm-6 col-sm-offset-3">
      <button type="submit" class="btn btn-primary" id="myFormSubmit">
        SUBMIT
      </button>
    </div>
  </div>
</form>