如果選中復選框，則禁用輸入
[英]Disable input if checkbox checked
問題描述
我想在選中復選框時禁用輸入。
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>
5 個解決方案
解決方案1
5 已采納 2015-07-22 09:29:12
您需要監聽復選框的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'));
});
});
解決方案2
3 2015-07-22 09:35:03
這很簡單，您可以這樣做
$(document).ready(function () {
$('#klient_open_4_end').click(function () {
$('#nightlife_open_7_start').prop('disabled', function(i, v) { return !v; });
});
});
但是從您的代碼段中，我假設您也想在頁面加載時運行某些操作以禁用輸入，因此您基本上可以使用相同的方法。
解決方案3
1 2015-07-22 09:32:12
您可以實現為
$('#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
簽出這個簡單的代碼
<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);
解決方案5
0 2018-07-05 06:32:42
它用於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.