Radio button jako image źle czyta input

Cześć, chce zrobić radio button jako image, z tym że jest pewien problem. W tym fiddlu wszystko śmiga, robie strone w technologii MVC (.NET CORE). Gdzie problem. On hover - elegancko działa, tylko jest problem że jak KLIKNE W OBRAZEK to zawsze, zawsze - PIERWSZY RADIO BUTTON (pierwsza pozycja) staje się aktywna. Jak klikne w to małe kółeczko (standardowy radio button) to normalnie zmienia zaznaczenia (zgodnie z css, już nie jest szare tylko podświetlone i wybrane). Ktoś wytłumaczy mi, dlaczego klknięcia w obrazek nie działają jak należy? (zawsze zmienia na pierwszy radio button). Mój kod wygląda mniej więcej tak:

• ss
  
  (2 radio button jest zhoverowany ale apka SS nie uwzględnia kursora).
  Jak klikne w dowolny obrazek a nie bezpośrednio radio button checbox to zmieni na pierwszą opcje:
  

<div class="cc-selector-2">
    @foreach (var item in Model.Races)
                {
                    <input asp-for="Input.Race" type="radio" value="@item.Name" />
                    <label class="drinkcard-cc" asp-for="Input.Race" style="background-image:url(@item.ImgPath)"></label>
                    //Jeszcze tak próbwałem <label class="drinkcard-cc" asp-for="Input.Race"><img src="@item.ImgPath" width="100" height="100" /></label>
                }
            </div>
</div>

css:

<style>
    .cc-selector-2 input {
        position: absolute;
        z-index: 999;
    }


    .cc-selector-2 input:active + .drinkcard-cc, .cc-selector input:active + .drinkcard-cc {
        opacity: .9;
    }

    .cc-selector-2 input:checked + .drinkcard-cc, .cc-selector input:checked + .drinkcard-cc {
        -webkit-filter: none;
        -moz-filter: none;
        filter: none;
    }

    .drinkcard-cc {
        cursor: pointer;
        background-size: contain;
        background-repeat: no-repeat;
        display: inline-block;
        width: 100px;
        height: 70px;
        -webkit-transition: all 100ms ease-in;
        -moz-transition: all 100ms ease-in;
        transition: all 100ms ease-in;
        -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
        -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
        filter: brightness(1.8) grayscale(1) opacity(.7);
    }

        .drinkcard-cc:hover {
            -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
            -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
        }



</style>

Nie ma tu nic nowego, wszystko jest z tego fiddla:
http://jsfiddle.net/La8wQ/313/

Zastosowałem Simple method. Czemu? Bo z image only ten problem występuje też wyżej opisany. Z tym, że są to tylko obrazki to zawsze wybiera pierwszego radio boxa mimo kliknięcia w inny.

Co robi asp-for? To jest do robienia pętli, czy do ustalania atrybutu for dla labeli w HTML?
Bo może po prostu każdy label się odwołuje do tego samego inputa i stąd ten problem?

A próbowałeś włożyć input w label?

        <label>
           <input type="radio" />
       </label>

wtedy nie trzeba byłoby używać atrybutu for.

Super. Faktycznie ASP-FOR było zbędne przy labelu. Nie rozumiem, czemu to cofa. Asp-for służy do data-bindingu. Tzn. przypisuje wartości z form do modelu, który został wcześniej zadeklarowany. Ja to tak rozumiem.
Zrobiłem tak:

 <input id="@item.Name" asp-for="Input.Race" type="radio" value="@item.Name" />
                    <label class="drinkcard-cc"  style="background-image:url(@item.ImgPath)" for="@item.Name"></label>

I śmiga.