Blazor: удаление атрибута Radio Input 'checked' - PullRequest
Новая
       50

Blazor: удаление атрибута Radio Input 'checked'

0 голосов
/ 20 июня 2020

На основе этого руководства , когда мы хотим использовать атрибуты HTML, такие как readonly и disabled, которые не требуют значений, мы должны присвоить атрибуту логическое значение, и бритва будет отображать атрибут на основе логического значения (не выводить атрибут, если логическое значение ложно, и наоборот).

Теперь предположим, что у нас есть группа входов радио, и мы хотим, чтобы кнопка Clear очищала выбранный радио input, чтобы ни один из радиовходов не был выбран (в основном начальное состояние). Кнопка 

@page "/"

<button @onclick="@(() => isChecked = false)">Clear</button>

<div class="form-check">
    <input class="form-check-input" type="radio" name="option" id="1" value="1"
           checked="@isChecked">
    <label class="form-check-label question-option" for="1">
        option A
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="option" id="2" value="2"
           checked="@isChecked">
    <label class="form-check-label question-option" for="2">
        option B
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="option" id="3" value="3"
           checked="@isChecked">
    <label class="form-check-label question-option" for="3">
        option C
    </label>
</div>


@code {
    private bool isChecked = false;
}

Clear не работает, потому что переменная isChecked инициализируется значением false и, следовательно, checked и его ассоциация (isChecked) никогда не помещалась на входы; но как мы можем удалить атрибут checked из входных данных?

1 Ответ

0 голосов
/ 20 июня 2020

Это работает 

@page "/"

<div>
    Selected: @selectedValue
</div>
<button @onclick="@(() => selectedValue = "")">Clear</button>

<div class="form-check">
    <input class="form-check-input" type="radio" name="option" id="1" value="1"
                 checked=@(selectedValue == "1") @onclick=@(() => selectedValue = "1")>
    <label class="form-check-label question-option" for="1">
        option A
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="option" id="2" value="2"
                 checked=@(selectedValue == "2") @onclick=@(() => selectedValue = "2")>
    <label class="form-check-label question-option" for="2">
        option B
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="option" id="3" value="3"
                 checked=@(selectedValue == "3") @onclick=@(() => selectedValue = "3")>
    <label class="form-check-label question-option" for="3">
        option C
    </label>
</div>


@code {
    private string selectedValue;
}
...