asp.net mvc 3 - Javascript to uncheck a checkbox when another is checked

This is a MVC 3 application that uses the razor view engine. I have the following line of code in a view that displays 2 checkboxes. When one is checked the other checkbox should uncheck. I have searched around and between my lack of exp with javascript and the lack of threads found on google related to this i am at a lost for even a code snip of javascript to use for a worthwhile starting point. Any ideas?? This below is what I have coded up on my own but am more stuck than anything with this.

        $("#isStaffCheckBox").change(
              function (e) {
                  var checked = $(this).attr('checked');
                  if(checked)
                  {

    <li>Staff Member: @Html.CheckBoxFor(Function(f) f.isStaff, New With {.id = "isStaffCheckBox"}) Board Member: @Html.CheckBoxFor(Function(f) f.boardMember, New With {.id = "isBoardCheckBox"})</li>

Any help is greatly appreciated..

        $("#isStaffCheckBox").change(
              function (e) {
                  var checked = $(this).attr('checked');
                  if(checked)
                  {

    <li>Staff Member: @Html.CheckBoxFor(Function(f) f.isStaff, New With {.id = "isStaffCheckBox"}) Board Member: @Html.CheckBoxFor(Function(f) f.boardMember, New With {.id = "isBoardCheckBox"})</li>

Any help is greatly appreciated..

Share Improve this question asked May 26, 2013 at 1:17 Skindeep2366 1,5593 gold badges41 silver badges69 bronze badges

2 Why are you reinventing a radio button? – epascarello Commented May 26, 2013 at 1:20
As far as I know in razor view radio button or checkboxes still need javascript to handle click event to uncheck another. – Skindeep2366 Commented May 26, 2013 at 4:04
1 Why would a radio button need JavaScript? Give them the same name and they magically uncheck. – epascarello Commented May 27, 2013 at 2:41
I will look at this a bit more in detail shortly.. Thanks much for the pointer. – Skindeep2366 Commented May 30, 2013 at 1:37

Add a ment |

3 Answers 3

Sorted by: Reset to default 5

If there is some reason for this to be a checkbox instead of a radio button then the following code should do it.

    $("#isStaffCheckBox").change(
          function (e) {
              $("#isBoardCheckBox").prop('checked',!this.checked);
          }
    });

Change the property "("#isBoardCheckBox").prop" to "("#isBoardCheckBox").attr".

Works fine!

  $("#isStaffCheckBox").change(
  function (e) {
      $("#isBoardCheckBox").attr("checked", !this.checked);
  })

// If you use jquery version 1.6.4 or below use "attr", if you use higher versions (1.9 or above) use "prop" instead of attr.

Code:

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Checkbox</title>
        <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $(":checkbox").change(function () {
                    $("input:checkbox").attr("checked", false);
                    $(this).attr("checked", "checked");
                });
            });
        </script>
    </head>
    <body>
        <input type="checkbox" id="chk1" value="1" /> Staff Member  <br/>
        <input type ="checkbox" id="chk2" value="2" /> Board Member
    </body>
</html>

Please have a look on this link JsFiddle my code

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

asp.net mvc 3 - Javascript to uncheck a checkbox when another is checked - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)