複選框作爲單選按鈕與prop（）

Question

我有3個列表（ul），裏面有複選框。如果我選一個和去檢查另一個，在一個檢查前必須取消選中（從一個列表複選框不應該從另一個列表中影響另一個）：

<!--printed from php --> 
<div id="checkboxes"> 
    <ul> 
     <li><input type="checkbox" /></li> 
     <li><input type="checkbox" /></li> 
     <li><input type="checkbox" /></li> 
    </ul> 
    <ul> 
     <li><input type="checkbox" /></li> 
     <li><input type="checkbox" /></li> 
     <li><input type="checkbox" /></li> 
    </ul> 
    <ul> 
     <li><input type="checkbox" /></li> 
     <li><input type="checkbox" /></li> 
     <li><input type="checkbox" /></li> 
    </ul> 
</div> 

這是jQuery代碼：

$(document).on('change', '#checkboxes li input[type=checkbox]', function() { 
    $(this).closest('ul').not(this).prop('checked', false); 

    //alert(this); 
}); 

該警報正在工作，但不是prop()。哪裏有問題？

Answer 1

問題在哪裏？

不選擇input元件以下.closest("ul")設置input元件checked屬性，而不是ul父元素？

嘗試調用後加入.find("input")到.closest()

$(document).on('change', '#checkboxes li input[type=checkbox]', function() { 
 
    $(this).closest('ul').find("input").not(this).prop('checked', false); 
 
    //alert(this); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="checkboxes"> 
 
    <ul> 
 
    <li> 
 
     <input type="checkbox" /> 
 
    </li> 
 
    <li> 
 
     <input type="checkbox" /> 
 
    </li> 
 
    <li> 
 
     <input type="checkbox" /> 
 
    </li> 
 
    </ul> 
 
    <ul> 
 
    <li> 
 
     <input type="checkbox" /> 
 
    </li> 
 
    <li> 
 
     <input type="checkbox" /> 
 
    </li> 
 
    <li> 
 
     <input type="checkbox" /> 
 
    </li> 
 
    </ul> 
 
    <ul> 
 
    <li> 
 
     <input type="checkbox" /> 
 
    </li> 
 
    <li> 
 
     <input type="checkbox" /> 
 
    </li> 
 
    <li> 
 
     <input type="checkbox" /> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

你通過ul選擇查找最近元素，並立即使用.not()不期望得到的工作。原因是，現在單擊的元素是checkbox本身，而不是ul元素。使用.find()，然後與.not()鏈接。反正試試這個代碼：

// can simplified selector like 
// $(document).on('change', '#checkboxes :checkbox', 
$(document).on('change', '#checkboxes li :checkbox', function() { 
    $(this).closest('ul').find(':checkbox').not(this).prop('checked', false); 
}); 

DEMO