Question

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

这是HTML代码：

＆＃13;

<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>

＆＃13;

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

Answer 1

将ID添加到您的表单，无线电，选择，按钮并使用jQuery，如下所示：

＆＃13;

  $(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);
    });
  });

＆＃13;

<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>

＆＃13;

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

为广播组添加了select和class name的id。

＆＃13;

$(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);
  });
});

＆＃13;

<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>

＆＃13;

PHP - 设置选项时启用按钮

3 个答案: