Check/Uncheck using jQuery не работает

Question

Я пытаюсь, чтобы флажки отображались как переключатели в моем ASP .NET MVC веб-приложении. У меня есть 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