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>

我尝试将 request 添加到收音机和选择中，但它不起作用...
显然我可以用 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>

Answer 2

首先，将您的下拉列表更改如下：

<select class="form-control">
    <option value="1"> One </option>
    <option value="2"> Two </option>
    <option value="3"> Three </option>
</select>

然后单击单选按钮，您可以设置如下所示的 jQuery 代码来隐藏按钮并在选中单选框时选择框。

$("input[name=radio]").on('click', function() {

        var checked = $("input[name=radio]").prop('checked');
        if(checked) { 
            $("button.btn").attr("disabled", true);
            $("select.form-control").attr("disabled", false);

        } 
        else { 
            $("button.btn").attr("disabled", false);
            $("select.form-control").attr("disabled", true);
        }   
    })

在更改下拉列表时，您可以隐藏单选按钮并通过匹配选项值显示提交按钮。

$('select.form-control').on('change', function() {
        var theVal = $(this).val();
        switch(theVal){
            case '1':
              $("button.btn").attr("disabled", true);
              $("input[name=radio]").attr("disabled", false); 
              break;
            case '2':
              $("button.btn").attr("disabled", true);
              $("input[name=radio]").attr("disabled", true);
              break;
            case '3':
              $("button.btn").attr("disabled", true);
              $("input[name=radio]").attr("disabled", true);
              break;  
        }
    });

这样，您还可以设置不同的操作，从下拉列表中选择任何特定值。

希望这对你有帮助。

Answer 3

为单选组添加了选择的 ID 和类名。

$(document).ready(function() {
  $(".radioOpt").change(function() {
    $('#selectOpt').attr('disabled', 'disabled');
    $('#submit').attr('disabled', false);
  });

  $("#selectOpt").change(function() {
    $(".radioOpt").attr('disabled', true);
    $('#submit').attr('disabled', false);
  });
  $("#reset").click(function() {
    $(".radioOpt").attr('disabled', false);
    $('.radioOpt').removeAttr('checked');
    $('#selectOpt').attr('disabled', false);
    $('#submit').attr('disabled', true);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form class="form-horizontal" method="post" data-toggle="validator">
  <div class="form-group">
    <label class="col-sm-3 control-label"> RADIO BUTTONS </label>
    <div class="cc-selector-2 col-sm-6 ">
      <input class="radioOpt" name="radio" type="radio" />
      <input class="radioOpt" name="radio" type="radio" />
    </div>
    <div class="col-sm-3">&nbsp;</div>
  </div>
  <br />
  <div class="form-group">
    <label class="col-sm-3 control-label"> SELECT </label>
    <div class="col-sm-6">
      <select id="selectOpt" class="form-control">
        <option value="">One</option>
        <option value="">Two</option>
        <option value="">Three</option>
      </select>
    </div>
  </div>
  <br />
  <div class="form-group">
    <div class="col-sm-6 col-sm-offset-3">
      <button id="submit" class="btn btn-primary" type="submit" disabled> SUBMIT </button>
      <button id="reset" class="btn btn-primary" type="button"> RESET </button>

    </div>
  </div>
</form>