选中复选框后禁用输入

Question

我想在检查checbox时禁用输入.

html的一部分:

 <div class="span1 ">
  <div class="control-group" id="niedziela">
    <label class="control-label" for="">Niedziela</label>
    <div class="controls">
      <input type="text" value="<?= $metavalue->nightlife_open_7_start ?>" name="meta[nightlife_open_7_start]" id="nightlife_open_7_start" class="m-wrap span12 timepicker-24" placeholder="">
      <input type="text" value="<?= $metavalue->nightlife_open_7_end ?>" name="meta[nightlife_open_7_end]" id="nightlife_open_7_end" class="m-wrap span12 timepicker-24" placeholder="">
      <input id="klient_open_4_end" type="checkbox" <?=_ set_checked($metavalue->nightlife_open_7_end,'do ostatniego klienta') ?> value="do ostatniego klienta" name="meta[nightlife_open_7_end]" class="m-wrap span12 timepicker" placeholder=""> Do ost. klienta
      <input id="zamkniete_open_4_end" type="checkbox" <?=_ set_checked($metavalue->nightlife_open_7_start,'zamkniete') ?> value="zamkniete" name="meta[nightlife_open_7_start]" class="m-wrap span12 timepicker" placeholder=""> Zamkni?te
    </div>
  </div>
</div>

我想要的是,如果选中了id为klient_open_4_end的复选框,它应该禁用id ="nightlife_open_7_end"的输入

如果选中id ="zamkniete_open_4_end"的复选框,则应禁用两个输入文本区域

我尝试过:

<script type="text/javascript">
  $(document).ready(function($) {
    $('#klient_open_4_end').change(function() {
      $(this).find("#nightlife_open_7_start").attr("disabled", true);
    });
  });
</script>

Answer 1

您需要收听click复选框的事件.既然你也用jQuery标记了这个问题,

$(function(){
   $('#klient_open_4_end').on('click', function(){           
       if($(this).is(':checked')){
           $('#nightlife_open_7_start').attr('disabled', true);
       } else {
           $('#nightlife_open_7_start').attr('disabled', false);
       }
   });

   $('#zamkniete_open_4_end').on('click', function(){
       // assuming the textarea is inside <div class="controls /">
       if($(this).is(':checked')){
           $('.controls input:text, .controls textarea').attr('disabled', true);
       } else {
           $('.controls input:text, .controls textarea').attr('disabled', false);
        }
   });
});

更新

您可以进一步缩短它,并使用以下代码:

$(function(){
   $('#klient_open_4_end').on('click', function(){                  
      $('#nightlife_open_7_start').attr('disabled', $(this).is(':checked'));       
   });

   $('#zamkniete_open_4_end').on('click', function(){
       // assuming the textarea is inside <div class="controls /">
       $('.controls input:text, .controls textarea').attr('disabled', $(this).is(':checked'));       
   });
});