無法/禁用具有多種形式的復選框字段上的選擇字段-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

您的輸入元素id =“ teamSize”沒有一個名為teamSize的類，因此您的jQuery（正在尋找一個類，而不是id）沒有任何目標。

Answer 2

檢查此代碼段。

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