无法/禁用具有多个表单的复选框字段上的选择字段 - Jquery

Question

我有几个具有相同字段的表单：一个复选框（引导开关）和一个选择

我希望当我选中复选框时，选择开关来启用/禁用

事情是当我这样做的时候，只有第一种形式在起作用:(

这是我的 HTML

<form method="POST" action="http://laravel.dev/tournaments/1/categories/6/settings/9" accept-charset="UTF-8">
    <div class="row">
        <div class="col-md-2">
            <label>
                <input id="isTeam7" name="isTeam" type="hidden" value="0">
                <input class="switch" data-on-text="Si" data-off-text="No" id="isTeam7" name="isTeam" type="checkbox" value="1">

            </label>
        </div>
        <div class="col-md-5">
            <select class="form-control" disabled="disabled" id="teamSize" name="teamSize"><option value="0">2</option><option value="1">3</option><option value="2" selected="selected">4</option><option value="3">5</option><option value="4">6</option><option value="5">7</option><option value="6">8</option><option value="7">9</option><option value="8">10</option><option value="9">11</option><option value="10">12</option><option value="11">13</option><option value="12">14</option><option value="13">15</option></select>
        </div>
    </div>

    <div align="right">
        <button type="submit" class="btn btn-success save_category" id="save7"><i></i>Guardar
        </button>
    </div>
</form>  
<form method="POST" action="http://laravel.dev/tournaments/1/categories/6/settings/9" accept-charset="UTF-8">
    <div class="row">
        <div class="col-md-2">
            <label>
                <input id="isTeam8" name="isTeam" type="hidden" value="0">
                <input class="switch" data-on-text="Si" data-off-text="No" id="isTeam8" name="isTeam" type="checkbox" value="1">

            </label>
        </div>
        <div class="col-md-5">
            <select class="form-control" disabled="disabled" id="teamSize" name="teamSize"><option value="0">2</option><option value="1">3</option><option value="2" selected="selected">4</option><option value="3">5</option><option value="4">6</option><option value="5">7</option><option value="6">8</option><option value="7">9</option><option value="8">10</option><option value="9">11</option><option value="10">12</option><option value="11">13</option><option value="12">14</option><option value="13">15</option></select>
        </div>
    </div>

    <div align="right">
        <button type="submit" class="btn btn-success save_category" id="save8"><i></i>Guardar
        </button>
    </div>
</form>  

这是我的 Jquery

    $('input[name="isTeam"]').on('switchChange.bootstrapSwitch', function (event, state) {
        var isChecked = $(this).is(':checked');
        $('.teamSize').prop('disabled', !isChecked);
    });

我怎样才能使它适用于我页面中的所有表单？？？

Answer 1

检查这个sn-p。

$(function() {
  $('input[name="isTeam"]').on('switchChange.bootstrapSwitch', function(event, state) {
    var isChecked = $(this).is(':checked');
    $(this).closest('form').find('[name="teamSize"]').prop('disabled', !isChecked);
  });

  $("input[type=\"checkbox\"], input[type=\"radio\"]").not("[data-switch-no-init]").bootstrapSwitch();

});

<link href="http://www.bootstrap-switch.org/dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.bootstrap-switch.org/dist/js/bootstrap-switch.js"></script>
<form method="POST" action="http://laravel.dev/tournaments/1/categories/6/settings/9" accept-charset="UTF-8">
  <div class="row">
    <div class="col-md-2">
      <label>
        <input id="isTeam7" name="isTeam" type="hidden" value="0">
        <input class="switch" data-on-text="Si" data-off-text="No" id="isTeam7" name="isTeam" type="checkbox" value="1">

      </label>
    </div>
    <div class="col-md-5">
      <select class="form-control" disabled="disabled" id="teamSize" name="teamSize">
        <option value="0">2</option>
        <option value="1">3</option>
        <option value="2" selected="selected">4</option>
        <option value="3">5</option>
        <option value="4">6</option>
        <option value="5">7</option>
        <option value="6">8</option>
        <option value="7">9</option>
        <option value="8">10</option>
        <option value="9">11</option>
        <option value="10">12</option>
        <option value="11">13</option>
        <option value="12">14</option>
        <option value="13">15</option>
      </select>
    </div>
  </div>

  <div align="right">
    <button type="submit" class="btn btn-success save_category" id="save7"><i></i>Guardar
    </button>
  </div>
</form>
<form method="POST" action="http://laravel.dev/tournaments/1/categories/6/settings/9" accept-charset="UTF-8">
  <div class="row">
    <div class="col-md-2">
      <label>
        <input id="isTeam8" name="isTeam" type="hidden" value="0">
        <input class="switch" data-on-text="Si" data-off-text="No" id="isTeam8" name="isTeam" type="checkbox" value="1">

      </label>
    </div>
    <div class="col-md-5">
      <select class="form-control" disabled="disabled" id="teamSize" name="teamSize">
        <option value="0">2</option>
        <option value="1">3</option>
        <option value="2" selected="selected">4</option>
        <option value="3">5</option>
        <option value="4">6</option>
        <option value="5">7</option>
        <option value="6">8</option>
        <option value="7">9</option>
        <option value="8">10</option>
        <option value="9">11</option>
        <option value="10">12</option>
        <option value="11">13</option>
        <option value="12">14</option>
        <option value="13">15</option>
      </select>
    </div>
  </div>

  <div align="right">
    <button type="submit" class="btn btn-success save_category" id="save8"><i></i>Guardar
    </button>
  </div>
</form>

Answer 2

您的 id="teamSize" 输入元素没有一个名为 teamSize 的类，因此您的 jQuery（它正在寻找一个类，而不是一个 id）没有任何目标。