jquery - toggle checkboxes and hide content

Question

Could someone help me out with this simple function:

I have 2 checkboxes, one called "other" and the other "info"

When user clicks on "other" "info" needs to be disabled and some content hidden. When "info" is checked, "other" needs to be enabled and additional content shown.

Here is the code:

  $("#mydiv").on("click", ".docheck :checkbox", function () {
      if ($(this).is(':checked')) {
          if ($(this).prop('name') == "other") {
              $(".header").toggle()
          } else {
              $(".header").toggle()
              $('.docheck').find('input[type=checkbox]').prop('checked', false);
              $(this).prop('checked', true)
          }
      }
  });

So far it works partially. After few clicks, both checkboxes end up being checked.

Answer 1

您的意思是选中/未选中未启用/禁用。

用一个函数解决我：

1. 保存当前选中的支票
2. 清场
3. 根据上一个选中的元素设置当前选择/可见性

代码可以更好，但现在：

$(document).ready(function () {
    $("#mydiv").on("click", ".docheck", function () {
        wasCheck = $(this).is(':checked');
        $('.docheck').prop('checked', false);
        $(".header, .info").hide();
        if (wasCheck) {
            if ($(this).prop('name') == "other") {
                $(".header").show()
            } else {
                $(".info").show()
            }
            $(this).prop('checked', true)
        }
    });
});

小提琴：http: //jsfiddle.net/TYhqZ/1