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 =＆＃34; nightlife_open_7_end＆＃34;

如果复选框的id =＆＃34; zamkniete_open_4_end＆＃34;被选中应禁用两个输入文本区域

我试过：

<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'));       
   });
});

Answer 2

这很简单，你可以这样做

$(document).ready(function () {
    $('#klient_open_4_end').click(function () {
        $('#nightlife_open_7_start').prop('disabled', function(i, v) { return !v; });
    });
});

但是从你的代码片段我假设你想在页面加载时运行一些东西来禁用输入，你可以用同样的方式做到这一点。

Answer 3

你可以实现这个

＆＃13;

$('#chk').change(function(){
  if($(this).is(':checked'))    
    $('#inp1').prop('disabled','disabled')
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='text' id='inp1' />
<input type='text' id='inp2' />
<input type='checkbox' id='chk' />

＆＃13;

Answer 4

结帐这个简单的代码

<html>
    <body>
        <input type="checkbox" id="klient_open_4_end" name="klient_open_4_end"/>
        <input type="text" id="nightlife_open_7_end" name="nightlife_open_7_end"/>
    </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#klient_open_4_end").change(function(){
                if($(this).prop("checked")){
                    $("#nightlife_open_7_end").prop("disabled",true);
                }
                else{
                    $("#nightlife_open_7_end").prop("disabled",false);
                }
            });
        });
    </script>
</html>

在上面的代码中

$("#nightlife_open_7_end").prop("disabled",true/false);

你可以使用

$('#nightlife_open_7_end').attr('disabled', true/false);

Answer 5

用于onclick禁用和启用

<!DOCTYPE html>
<html>
<body>

Checkbox: <input type="checkbox" id="myCheck">

<button onclick="check()">Check Checkbox</button>
<button onclick="uncheck()">Uncheck Checkbox</button>
<script type="text/javascript">
  function check() {
    if(document.getElementById("myCheck").checked == true)
    {
    document.getElementById("input").disabled = true;
    }
    else{
     document.getElementById("input").disabled = false;
    }
}
</script>

</body>
</html>

如果选中复选框，则禁用输入

5 个答案:

更新