غیر فعال کردن انتخاب همزمان چندین checkbox توسط javascript

سه شنبه 22 اردیبهشت 1394

اگر لیستی از checkbox ها داشته باشیم و کاربر را مجاب به انتخاب فقط یک checkbox کنیم باید توسط JavaScript این کار را انجام دهیم .

غیر فعال کردن انتخاب همزمان چندین checkbox توسط javascript

برای این کار باید توسط java script تابعی ایجاد شود که تعداد checkbox های کلیک شده را چک کند و بررسی میکند که بیشتر از یک checkbox انتخاب نشده باشد :


<script type = "text/javascript">
    function MutExChkList(chk)
    {
        var chkList = chk.parentNode.parentNode.parentNode;
        var chks = chkList.getElementsByTagName("input");
        for(var i=0;i<chks.length;i++)
        {
            if(chks[i] != chk && chk.checked)
            {
                chks[i].checked=false;
            }
        }
    }
</script>

با فراخوانی تابع javascript در هنگام کلیک هر کدام از checkboxها را بررسی میکند که حتمی یک checkbox انتخاب شود .دو روش برای فراخوانی تابع جاوا اسکریپت در هنگام کلیک وجود دارد :

1 : Direct Mode

آسانترین روش برای تنظیم کردن و فراخوانی تابع جاوا اسکریپت , تنظیم روبداد OnClick برای هر ListItem میباشد .


<asp:CheckBoxList ID="CheckBoxList1" runat="server">
    <asp:ListItem Text="Mango" Value="1" onclick="MutExChkList(this);" />
    <asp:ListItem Text="Apple" Value="2" onclick="MutExChkList(this);" />
    <asp:ListItem Text="Banana" Value="3" onclick="MutExChkList(this);" />
    <asp:ListItem Text="Guava" Value="4" onclick="MutExChkList(this);" />
    <asp:ListItem Text="Orange" Value="5" onclick="MutExChkList(this);" />
</asp:CheckBoxList>

2 : نوشتن متد در قسمت دستورات

در این متد , رویداد OnClick به کنترل های Checkbox نسبت داده می شوند .

تگ HTML :
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
    <asp:ListItem Text="Mango" Value="1" />
    <asp:ListItem Text="Apple" Value="2" />
    <asp:ListItem Text="Banana" Value="3" />
    <asp:ListItem Text="Guava" Value="4" />
    <asp:ListItem Text="Orange" Value="5" />
</asp:CheckBoxList>

دستور #C :


protected void Page_Load(object sender, EventArgs e)
{
    for (int i = 0; i < CheckBoxList1.Items.Count; i++)
    {
        CheckBoxList1.Items[i].Attributes.Add("onclick", "MutExChkList(this)");   
    }
}

دستور VB.Net :


Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    For i As Integer = 0 To CheckBoxList1.Items.Count - 1
        CheckBoxList1.Items(i).Attributes.Add("onclick", "MutExChkList(this)")
    Next
End Sub

فایل های ضمیمه

احسان حسینی

نویسنده 42 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

تاکنون هیچ کاربری از این پست تشکر نکرده است

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید