как заставить пользователя выбрать только один флажок в списке флажков

Question

У меня есть флажок с (6 пунктов под ним). и у меня есть кнопка поиска. если пользователь нажимает кнопку поиска, он получает весь результат. я связываю элементы для checkboxlist, используя базу данных в файле .cs

condition1: но теперь, если пользователь устанавливает флажок [item1], его выбирают и он пытается установить флажок 2 [item2], а затем первый выбранный флажок [item1] должен быть снят. должен быть установлен только флажок [item2]

условие 2: Теперь, если пользователь выбрал checkbox1 [item1], он будет выбран. и теперь, если пользователь снова нажимает на флажок [item1], он должен быть отменен.

либо вы можете предоставить мне решение в javascript или JQuery любая помощь будет отличной. с нетерпением жду решения спасибо

Answer 1

используйте радио кнопку. Единственная проблема, с которой вы столкнетесь, - это когда вы хотите отменить выбор радиокнопки. Вы можете написать в javascript для 'onClick' радиокнопки. Функция onClick может проверить, выбран ли переключатель, если он не выбран, в противном случае отмените выбор.

Надеюсь, это поможет. См. Пример

RDJ

Answer 2

Хотя я определенно согласен с мнением о том, что радиокнопки - это путь для описанного вами варианта использования, здесь приведен небольшой фрагмент jquery, который заставит флажки работать как радиокнопки. Вам просто нужно добавить атрибут «groupname» к вашему флажку.

HTML:

<fieldset>
<legend>Group 1 - radio button behavior</legend>
<input type="checkbox" groupname="group1" value="1" /> Checkbox 1<br />
<input type="checkbox" groupname="group1" value="2" /> Checkbox 2<br />
<input type="checkbox" groupname="group1" value="3" /> Checkbox 3<br />
<input type="checkbox" groupname="group1" value="4" /> Checkbox 4<br />
<input type="checkbox" groupname="group1" value="5" /> Checkbox 5<br />
</fieldset>


<fieldset>    
<legend>Group 2 - radio button behavior</legend>
<input type="checkbox" groupname="group2" value="1" /> Checkbox 1<br />
<input type="checkbox" groupname="group2" value="2" /> Checkbox 2<br />
<input type="checkbox" groupname="group2" value="3" /> Checkbox 3<br />
<input type="checkbox" groupname="group2" value="4" /> Checkbox 4<br />
<input type="checkbox" groupname="group2" value="5" /> Checkbox 5<br />
</fieldset>

<fieldset>    
<legend>Group 3 normal checkbox behavior</legend>
<input type="checkbox" value="1" /> Checkbox 1<br />
<input type="checkbox" value="2" /> Checkbox 2<br />
<input type="checkbox" value="3" /> Checkbox 3<br />
<input type="checkbox" value="4" /> Checkbox 4<br />
<input type="checkbox" value="5" /> Checkbox 5<br />
</fieldset>

Javascript:

    <script type="text/javascript">
    $(document).ready(function() {
        $('input[type=checkbox]').click(function() {
        var groupName = $(this).attr('groupname');

            if (!groupName)
                return;

            var checked = $(this).is(':checked');

            $("input[groupname='" + groupName + "']:checked").each(function() {
                $(this).prop('checked', '');
            });

            if (checked)
                $(this).prop('checked', 'checked');
        });
    });
</script>

Я уверен, что есть возможность увеличить краткость и производительность, но это должно помочь вам начать.

Answer 3

Почему бы вам не использовать радио-кнопки, они идеально подходят для упомянутой вами цели.

Edit:

Если вы обязательно хотите использовать список флажков, присвойте этим логическим идентификаторам несколько логических идентификаторов, чтобы вы могли получить к ним доступ в JavaScript. При каждом событии onclick из флажков вызывайте JavaScript и в цикле JavaScript просматривайте

• Если флажок установлен, другой чем отмеченный флажок, затем сделайте их невыбранными.
• Если данный флажок уже установлен проверил, а затем просто включи.

Вы можете увидеть, установлен ли флажок, используя $("#checkboxId").is(":checked"), который возвращает true, если флажок установлен.

Спасибо

Answer 4

Попробуйте это решение:

Код сзади (C #):

foreach (ListItem listItem in checkBoxList.Items)
{
    listItem.Attributes.Add("onclick", "makeSelection(this);");
}

Java Script:

function makeSelection(checkBox)
{
    var checkBoxList = checkBox;
    while (checkBoxList.parentElement.tagName.toLowerCase() != "table")
    {
        checkBoxList = checkBoxList.parentElement;
    }

    var aField = checkBoxList.getElementsByTagName("input");
    var bChecked = checkBox.checked;

    for (i = 0; i < aField.length; i++)
    {
        aField[i].checked = (aField[i].id == checkBox.id && bChecked);
    }
}

Answer 5

мы можем сделать в сценарии Java, чтобы получить решение для этого.

Для этого сначала получите идентификатор отмеченного элемента и тщательно изучите оставшиеся элементы, используя цикл, затем снимите флажки с оставшихся элементов

http://csharpektroncmssql.blogspot.com/2011/11/uncheck-check-box-if-another-check-box.html

Answer 6

Мое решение jQuery для этого закодировано следующим образом:

$(document).ready(function () {
    SetCheckboxListSingle('cblFaxTypes');
});

function SetCheckboxListSingle(cblId) {
    $('#' + cblId).find('input[type="checkbox"]').each(function () {
        $(this).bind('click', function () {
            var clickedCbxId = $(this).attr('id');
            $('#cblFaxTypes').find('input[type="checkbox"]').each(function () {
                if (clickedCbxId == $(this).attr('id'))
                return true;
               // do not use JQuery to uncheck the here because it breaks'defaultChecked'property
                // http://bugs.jquery.com/ticket/10357
                document.getElementById($(this).attr('id')).checked = false;

            });
        });
    });
}

Answer 7

.aspx

<asp:CheckBoxList id="chkList" runat="server" RepeatLayout="Flow" />

.js

$(document).ready(function () {
    LimitCheckboxes('input[name*=chkList]', 3);
}



function LimitCheckboxes(control, max) {

    $(control).live('click', function () {

        //Count the Total Selection in CheckBoxList 
        var totCount = 1;
        $(this).siblings().each(function () {
            if ($(this).attr("checked")) { totCount++; }
        });

        //if number of selected item is greater than the max, dont select.
        if (totCount > max) { return false; }
        return true;
    });

}

PS: убедитесь, что вы используете RepeatLayout = "Flow", чтобы избавиться от надоедливого формата таблицы.

Answer 8

Возможно, вы захотите взглянуть на MutuallyExclusiveCheckBoxExtender .

Answer 9

этот код помог мне решить эту проблему

просто добавьте скрипт -

var objChkd;

функция HandleOnCheck () {

var chkLst = document.getElementById ('CheckBoxList1'); if (objChkd && objChkd.checked)

      objChkd.checked=false;objChkd = event.srcElement; 

}

и зарегистрируйте клиентское событие в 'CheckBoxList1' на Page_load как

CheckBoxList1.Attributes.Add ("onclick", "return HandleOnCheck ()");