如何禁用一組複選框，如果沒有選擇其他組的複選框

我想這很簡單，但不幸的是我根本不知道JavaScript，並且無法找到一個已經存在的解決方案。如何禁用一組複選框，如果沒有選擇其他組的複選框

<input type='checkbox' class='group1' name='1'> Name1<br>  
<input type='checkbox' class='group1' name='2'> Name2<br>  
<input type='checkbox' class='group1' name='3'> Name3<br><br> 
<input type='checkbox' class='group2' name='4'> Name4<br>  
<input type='checkbox' class='group2' name='5'> Name5<br>

所以，如果沒有Name1，Name2，也不Name3選擇，Name4和Name5應禁用。

在此先感謝，夥計們！

由於我的頁面已在其< head>部分中包含jQuery，因此我決定使用需要此庫的變體。所以，我嘗試了代碼永隆提供，這是一個成功。然而，它有以下兩個缺點：

我忘了提及禁用的複選框應該顯式設置爲未選中狀態。在當前的實現中，當我選擇第二組中的一個複選框（例如，Name4），然後取消選中第一個複選框時，Name4被禁用，但仍被檢查。這是完全錯誤的，因爲處理表單的服務器將接受Name4作爲選定的選項。如果不是這樣，用戶可能會感到困惑。
在這個頁面上，我有另一個jQuery腳本，當用戶選擇一個名爲「全選」的複選框時，它會自動選擇第一組的所有複選框。那就是：
```
<input type='checkbox' id='maincb'> Check all 
```

和JavaScript這樣的：

<script type="text/javascript">  
    $(document).ready(function() {  
    $("#maincb").click(function() {  
if($('#maincb').attr('checked')) {  
    $('.group1:enabled').attr('checked', true);  
} else {  
    $('.group1:enabled').attr('checked', false);  
}  
});  
    });  
</script>

的問題是，這兩個腳本不相互做的很好。即使在我將類group1分配到「全部檢查」複選框後，它也不會影響第二組的複選框。

來源

2013-04-11 Cuder

你必須定義殘疾...隱形？無法點擊？不可發送？所有？ – zozo 2013-04-11 12:01:25

@zozo：有一個禁用的屬性'' – 2013-04-11 12:28:22

是啊......但它過去有一些問題。無論如何...當我在AFK時你有999個答案。 – zozo 2013-04-11 14:28:14

你想要這樣的工作嗎？

http://jsfiddle.net/steelywing/MtDLB/1/

$('#check_group1').click(function() { 
    $('.group1:enabled').prop('checked', $(this).prop('checked')); 
    updateButton(); 
}); 

function updateButton() { 
    if ($('.group1:checked').length == 0) { 
     $('.group2') 
      .prop('disabled', true) 
      .prop("checked", false); 
    } else { 
     $('.group2').prop('disabled', false); 
    } 
} 

$('.group1').change(function() { 
    updateButton(); 
}); 

updateButton();

來源

2013-04-11 12:05:35

是的，這是我想要的。我更新了我的帖子，添加了關於您的腳本的一些重要細節。 – Cuder 2013-04-12 12:16:45

已更新，請參閱示例http://jsfiddle.net/steelywing/MtDLB/1/ – 2013-04-12 17:36:12

是jQuery的一個選擇嗎？如果是的話這是非常簡單的...

$('input').click(function() { 

     if ($('.group1').is(':checked')) { 
      $('.group2').attr('disabled', 'disabled'); 
     } else { 
      $('.group2').removeAttr('disabled'); 
     } 

    });

DEMO

來源

2013-04-11 12:06:11 Turnip

HTML

<input type='checkbox' class='group1' name='1'> Name1<br>  
<input type='checkbox' class='group1' name='2'> Name2<br>  
<input type='checkbox' class='group1' name='3'> Name3<br><br> 
<input type='checkbox' class='group2' name='4'> Name4<br>  
<input type='checkbox' class='group2' name='5'> Name5<br>

的JavaScript（純淨，無jQuery的）

function checkFields() { 
    var inputs = document.getElementsByTagName('input'); 

    if (inputs.length == 5) { 
     if (inputs[0].checked == true || inputs[1].checked == true || inputs[2].checked == true) { 
      inputs[3].disabled = false; 
      inputs[4].disabled = false; 
     } 
     else { 
      inputs[3].disabled = true; 
      inputs[4].disabled = true; 
     } 
    } 
} 

// On-load 
checkFields(); 

var inputs = document.getElementsByTagName('input'); 

for (var i = 0; i < inputs.length; i++) { 
    inputs[i].addEventListener('click', function() { 
     checkFields(); 
    }); 
}

，可能會讓初checkFields();轉換成<body onload="">。另外請記住，您希望在帶有ID的父包裝上定位document.getElementsByTagName('input');，以防意外匹配頁面上的其他輸入字段。

HTML

<form id="wrappingForm"> 
    <input type='checkbox' class='group1' name='1'> Name1<br>  
    <input type='checkbox' class='group1' name='2'> Name2<br>  
    <input type='checkbox' class='group1' name='3'> Name3<br><br> 
    <input type='checkbox' class='group2' name='4'> Name4<br>  
    <input type='checkbox' class='group2' name='5'> Name5<br> 
</form>

的JavaScript

var wrapper = document.getElementById('wrappingForm'); 
var inputs = wrapper.getElementsByTagName('input');

來源

2013-04-11 12:10:58

<script type=text/javascript> 
function clk(){ 
if (op1.checked == 1 && op2.checked == 1 && op3.checked == 1){ 
      op4.checked=1 ; 
      op5.checked=1 ; 
} 
} 
</script> 


<input type='checkbox' class='group1' onclick="clk()" name='op1'> Name1<br>  
<input type='checkbox' class='group1' onclick="clk()" name='op2'> Name2<br>  
<input type='checkbox' class='group1' onclick="clk()" name='op3'> Name3<br> 
<input type='checkbox' class='group2' name='op4'> Name4<br>  
<input type='checkbox' class='group2' name='op5'> Name5<br>

來源

2013-04-11 12:18:49 MrElefant

如何禁用一組複選框，如果沒有選擇其他組的複選框

回答

相關問題