Unable / disable select field on checkbox field with several forms - Jquery

Question

I have several form having the same fields: A checkbox (bootstrap switch) and a select

I want that when I pick the checkbox, the select switch to enable / disable

Thing is when I do it, only the first form is working :(

Here is my 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>  

Here is my Jquery

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

How can I do so that it work for all the forms in my page???

Answer 1

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

Answer 2

Check this snippet.

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