jquery - показывать текстовое поле, когда флажок установлен

У меня есть эта форма

<form action="">
  <div id="opwp_woo_tickets">
    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][0][enable]">
    <div class="max_tickets">
        <input type="text" name="opwp_wootickets[tickets][0][maxtickets]">
    </div>

    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][1][enable]">
    <div class="max_tickets">
        <input type="text" name="opwp_wootickets[tickets][1][maxtickets]">
    </div>

    <input type="ch,eckbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][2][enable]">
    <div class="max_tickets">
        <input type="text" name="opwp_wootickets[tickets][2][maxtickets]">
    </div>
  </div>
</form>

На данный момент я использую этот код jquery для отображения текстового поля, когда флажок установлен.

jQuery(document).ready(function($) {
   $('input.maxtickets_enable_cb').change(function(){
        if ($(this).is(':checked')) $('div.max_tickets').show();
        else $('div.max_tickets').hide();
    }).change();
});

Работает нормально, но при проверке показывает все текстовые поля.

Может кто-нибудь помочь мне это исправить?

Вот демо моей проблемы.

http://codepen.io/mistergiri/pen/spBhD

Ответы на вопрос(7)

Ваш ответ на вопрос