檢查/取消選中使用jQuery不起作用

Question

我想讓複選框的行爲像我的ASP .NET MVC Web應用程序中的單選按鈕。我有大約20-30個複選框，分爲兩組。例如：

<input type="checkbox" id="@riggingType.RiggingTypeId 1" name="RiggingTypePlus" 
     value="@riggingType.RiggingTypeId" 
     checked="@riggingTypeIds.Contains(riggingType.RiggingTypeId)" /> 

<input type="checkbox" id="@riggingType.RiggingTypeId 2" name="RiggingTypeMinus" 
     value="@riggingType.RiggingTypeId" 
     checked="@riggingTypeIds.Contains(riggingType.RiggingTypeId)" /> 

目標：

我想要的複選框以這樣的方式來運轉，如果被選中一個Plus複選框，則Minus自動反之則是聽之任之。我已經寫了下面的代碼來嘗試實現這一功能：

$(":checkbox").change(function() { 
    var inputs = $(this).parents("form").eq(0).find(":checkbox"); 
    var idx = inputs.index(this); 
    if (this.name.substring(this.name.length - 4, this.name.length) === "Plus") { 
     // just trying to check if I am getting the right it 
     // and I am getting the right id 
     // alert(inputs[idx + 1].id); 

     // But this does not work 
     $("#" + inputs[idx + 1].id).prop('checked', false); 
    } 
}); 

難道我在這裏做得不對：

$("#" + inputs[idx + 1].id).prop('checked', false); 

任何幫助將不勝感激。

我知道我可以使用單選按鈕並按相同的名稱對它們進行分組，但我將這些元素渲染爲一個循環，因此它們都具有相同的名稱但具有不同的值，因此我不想將它們命名爲不同的名稱我在服務器端使用這些數據...有沒有更好的方法來做到這一點？

答：

使用得到這個工作如下：

$(document).ready(function(){ 
    $(":checkbox").on('click', function() { 

    var $this = $(this); 
    var inputs = $this.closest("form").find(":checkbox"); 
    if ($this.attr('name').substring(this.name.length - 4, this.name.length) === "Plus" && $this.attr('checked')) { 
     $this.next().prop('checked', false); 
    } 
     else 
     { 
      $this.prev().prop('checked', false); 
     } 
    }); 
}); 

Fiddle Link

Answer 1

小提琴：https://jsfiddle.net/24gmnjwm/1/

$(document).ready(function(){ 
    $(":checkbox").on('click', function() { 
    var $this = $(this); 
    var inputs = $this.closest("form").find(":checkbox"); 
    if ($this.attr('name').substring(this.name.length - 4, this.name.length) === "Plus") { 
     $this.next().prop('checked', false); 
    } 
    }); 
}); 

Answer 2

如果我們可以假設 「加」 checkb牛總是立即出現之前，其相關的「減」複選框，然後這將這樣的伎倆：

$(":checkbox").change(function() { 
    if ($(this).prop("name").match(/Plus$/)) { 
     $(this).next().prop("checked", !$(this).prop("checked")); 
    } else { 
     $(this).prev().prop("checked", !$(this).prop("checked")); 
    } 
}); 

樣表：

<form> 
<input type="checkbox" name="RiggingTypePlus" value="2" checked /> 
<input type="checkbox" name="RiggingTypeMinus" value="2" /> 
<input type="checkbox" name="RiggingTypePlus" value="3" /> 
<input type="checkbox" name="RiggingTypeMinus" value="3" /> 
<input type="checkbox" name="RiggingTypePlus" value="4" /> 
<input type="checkbox" name="RiggingTypeMinus" value="4" /> 
<input type="checkbox" name="RiggingTypePlus" value="5" /> 
<input type="checkbox" name="RiggingTypeMinus" value="5" /> 
</form> 

fiddle