如果选中复选框，则禁用输入
[英]Disable input if checkbox checked
问题描述
i want to disable inputs when a checbox is checked. 
我想在选中复选框时禁用输入。
part of html: 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>
what i want is that if checkbox with id klient_open_4_end is checked it should disable input with id="nightlife_open_7_end" 我想要的是，如果选中ID为klient_open_4_end的复选框，则应禁用id =“ nightlife_open_7_end”的输入
if checkbox with id="zamkniete_open_4_end" is checked should disable both inputs text areas 如果选中具有id =“ zamkniete_open_4_end”的复选框，则应禁用两个输入文本区域
i tried with : 我尝试过：
<script type="text/javascript">
$(document).ready(function($) {
$('#klient_open_4_end').change(function() {
$(this).find("#nightlife_open_7_start").attr("disabled", true);
});
});
</script>
5 个解决方案
解决方案1
5 已采纳 2015-07-22 09:29:12
You'll need to listen to the click event of the checkboxes. 您需要监听复选框的click事件。 Since you've tagged the question with jQuery too, 由于您也用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);
}
});
});
Update 更新资料
You can shorten this even more and use the following instead: 您可以进一步缩短它，而改用以下内容：
$(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'));
});
});
解决方案2
3 2015-07-22 09:35:03
This is fairly simple, you can do it like this 这很简单，您可以这样做
$(document).ready(function () {
$('#klient_open_4_end').click(function () {
$('#nightlife_open_7_start').prop('disabled', function(i, v) { return !v; });
});
});
But from your snippet I'm assuming you want to run something when the page loads to disable the input as well, you can do that the same way essentially. 但是从您的代码段中，我假设您也想在页面加载时运行某些操作以禁用输入，因此您基本上可以使用相同的方法。
解决方案3
1 2015-07-22 09:32:12
You can achieve this as 您可以实现为
$('#chk').change(function(){ if($(this).is(':checked')) $('#inp1').prop('disabled','disabled') })
<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' />
解决方案4
0 2015-07-22 09:39:24
checkout this simple code 签出这个简单的代码
<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>
In above code 在上面的代码中
$("#nightlife_open_7_end").prop("disabled",true/false);
you may use 你可以用
$('#nightlife_open_7_end').attr('disabled', true/false);
解决方案5
0 2018-07-05 06:32:42
It is for onclick disable and enable 它用于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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.