如果複選框選中禁用其他，如果未選中啓用所有JavaScript？

我有一組複選框按鈕，如果我點擊並選中一個，我希望其他複選框被設置爲禁用。此外，如果我點擊相同，並取消選中我希望所有人都啓用。我的邏輯工作，如果我檢查複選框，但如果我再次點擊所有這些都被禁用。這裏是我的代碼：如果複選框選中禁用其他，如果未選中啓用所有JavaScript？

<tr><td><input type="checkbox" name="progress" id="progress1" value="1" tabIndex="1" onClick="ckChange(this)">Test 1</td></tr> 
<tr><td><input type="checkbox" name="progress" id="progress2" value="1" tabIndex="1" onClick="ckChange(this)">Test 2</td></tr> 
<tr><td><input type="checkbox" name="progress" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)">Test 3</td></tr> 
<tr><td><input type="checkbox" name="progress" id="progress4" value="1" tabIndex="1" onClick="ckChange(this)">Test 4</td></tr> 

function ckChange(ckType){ 
     var ckName = document.getElementsByName(ckType.name); 

     for(var i=0; i < ckName.length; i++){ 
      if(!ckName[i].checked){ 
       ckName[i].disabled = true; 
      }else{ 
       ckName[i].disabled = false; 
      } 
     } 
    }

當我檢查複選框時，我當前的代碼未能將disable屬性設置爲true和false。如果您看到我的代碼中存在問題，請告訴我。我試圖讓這個功能適用於任何一組複選框。如果你看到任何改善這種情況的方法，我希望聽到。

來源

2017-04-12 espresso_coffee

有你的arent使用單選按鈕的具體原因具有明確的功能？ – indubitablee

愚蠢的問題。你可以使用單選按鈕嗎？如果他們具有相同的名稱屬性，則不能選擇多於1個 –

我必須使用複選框元素，問題可能很愚蠢，但我試圖在可能的情況下使其工作。 –

添加一個簡單的ifelse語句來檢查複選框是否被選中。如果選中，則禁用所有其他複選框。如果沒有選中，啓用所有複選框

<tr><td><input type="checkbox" name="progress" id="progress1" value="1" tabIndex="1" onClick="ckChange(this)">Test 1</td></tr> 
 
<tr><td><input type="checkbox" name="progress" id="progress2" value="1" tabIndex="1" onClick="ckChange(this)">Test 2</td></tr> 
 
<tr><td><input type="checkbox" name="progress" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)">Test 3</td></tr> 
 
<tr><td><input type="checkbox" name="progress" id="progress4" value="1" tabIndex="1" onClick="ckChange(this)">Test 4</td></tr> 
 

 
<script> 
 
function ckChange(ckType){ 
 
    var ckName = document.getElementsByName(ckType.name); 
 
    var checked = document.getElementById(ckType.id); 
 

 
    if (checked.checked) { 
 
     for(var i=0; i < ckName.length; i++){ 
 

 
      if(!ckName[i].checked){ 
 
       ckName[i].disabled = true; 
 
      }else{ 
 
       ckName[i].disabled = false; 
 
      } 
 
     } 
 
    } 
 
    else { 
 
     for(var i=0; i < ckName.length; i++){ 
 
     ckName[i].disabled = false; 
 
     } 
 
    }  
 
} 
 
</script>

PS。你的代碼的問題是無論如何for循環都在執行。所以如果你檢查了一些東西，它會禁用所有未選中的東西，但是如果你取消選中某個東西，這些循環將禁用所有的複選框，因爲所有的複選框現在都是未選定的。那就是爲什麼我添加的if聲明有效。它區分複選框是否被選中或未選中，然後執行所需的功能。

來源

2017-04-12 19:21:40 indubitablee

我有一個問題，我不確定這是否是最好的方法。一旦我加載我的頁面，我必須根據數據庫中的值檢查我的複選框。可以檢查組中的其中一個複選框，如果是複選框，則必須禁用具有相同元素名稱的其餘複選框。我應該嘗試使用相同的功能還是應該單獨的JavaScript功能？ –

@espresso_coffee你可以使用相同的功能。您可以根據數據庫中的數據加載頁面後觸發點擊 – indubitablee

但我會將該值傳遞給我的函數，這與現在函數的工作方式不同。我試過了，但沒有奏效。這是我曾嘗試過的：ckChange（' #Trim（myData。進展）＃'）; –

你走了，按你的意願工作。

function ckChange(ckType) { 
 
    var ckName = document.getElementsByName(ckType.name); 
 

 
    for (var i = 0; i < ckName.length; i++) { 
 
    if (!ckType.checked) { 
 
     ckName[i].disabled = false; 
 
    } else { 
 
     if (!ckName[i].checked) { 
 
     ckName[i].disabled = true; 
 
     } else { 
 
     ckName[i].disabled = false; 
 
     } 
 
    } 
 
    } 
 

 
}

<tr> 
 
    <td><input type="checkbox" name="progress" id="progress1" value="1" tabIndex="1" onClick="ckChange(this)">Test 1</td> 
 
</tr> 
 
<tr> 
 
    <td><input type="checkbox" name="progress" id="progress2" value="1" tabIndex="1" onClick="ckChange(this)">Test 2</td> 
 
</tr> 
 
<tr> 
 
    <td><input type="checkbox" name="progress" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)">Test 3</td> 
 
</tr> 
 
<tr> 
 
    <td><input type="checkbox" name="progress" id="progress4" value="1" tabIndex="1" onClick="ckChange(this)">Test 4</td> 
 
</tr>

來源

2017-04-12 19:25:40 Oen44

另一種可能的實現：

function ckChange(el) { 
 
    var ckName = document.getElementsByName(el.name); 
 
    if (el.checked) { 
 
    for (var i = 0; i < ckName.length; i++) { 
 
     ckName[i].disabled = ckName[i] !== el; 
 
    } 
 
    } else { 
 
    for (var i = 0; i < ckName.length; i++) { 
 
     ckName[i].disabled = false 
 
    } 
 
    } 
 

 
}

<tr> 
 
    <td><input type="checkbox" name="progress" id="progress1" value="1" tabIndex="1" onClick="ckChange(this)">Test 1</td> 
 
</tr> 
 
<tr> 
 
    <td><input type="checkbox" name="progress" id="progress2" value="1" tabIndex="1" onClick="ckChange(this)">Test 2</td> 
 
</tr> 
 
<tr> 
 
    <td><input type="checkbox" name="progress" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)">Test 3</td> 
 
</tr> 
 
<tr> 
 
    <td><input type="checkbox" name="progress" id="progress4" value="1" tabIndex="1" onClick="ckChange(this)">Test 4</td> 
 
</tr>

來源

2017-04-12 19:30:43

同一件事情，更短的代碼。從邏輯上講，「目前複選框應啓用IFF（點擊的複選框沒有被選中）或（目前的複選框被點擊複選框）」

function ckChange(el) { 
 
    var ckName = document.getElementsByName(el.name); 
 
    for (var i = 0, c; c = ckName[i]; i++) { 
 
    c.disabled = !(!el.checked || c === el); 
 
    } 
 
}

<tr> 
 
    <td><input type="checkbox" name="progress" id="progress1" value="1" tabIndex="1" onClick="ckChange(this)">Test 1</td> 
 
</tr> 
 
<tr> 
 
    <td><input type="checkbox" name="progress" id="progress2" value="1" tabIndex="1" onClick="ckChange(this)">Test 2</td> 
 
</tr> 
 
<tr> 
 
    <td><input type="checkbox" name="progress" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)">Test 3</td> 
 
</tr> 
 
<tr> 
 
    <td><input type="checkbox" name="progress" id="progress4" value="1" tabIndex="1" onClick="ckChange(this)">Test 4</td> 
 
</tr>

來源

2017-04-12 19:48:34 James

如果複選框選中禁用其他，如果未選中啓用所有JavaScript？

回答

相關問題