单击其中一个div并获取值时，禁用同级div

Question

当我点击其中一个DIV时，它会找到DIV内的复选框并“检查”它。所以另一个DIV会隐藏起来。 我面临的问题是如何禁用其他DIV当它隐藏自己的时间或者我可以点击其他DIV并通过仅离开点击的DIV打破了最初的想法。

2）如何获得已检查div的值？

3）如何检测是否没有选中复选框？

TQ

 <div id="answer">
    <h3>A</h3>
    <p id="result">Tick the correct answer</p>
    <div id="a1">A. <input type="checkbox" value="1" name="ans" ></input></div>
    <div id="a2">B. <input type="checkbox" value="2" name="ans"></input></div>
    <div id="a3">C. <input type="checkbox" value="3" name="ans"></input></div>
    <div id="a4">D. <input type="checkbox" value="4" name="ans"></input></div>
    </div>

    <button id="checkbtn">Check Answer</button>


var btncounter = 0;
$("#checkbtn").hide();
$("#answer > div").click(function (e) {
e.stopPropagation();
    var status = $(this).find("input:checkbox").prop('checked'); 
    $(this).find("input:checkbox").prop("checked", !status);
    $(this).siblings('div').slideToggle(!status);
    btncounter++;
    if(btncounter%2 == 1)
    $("#checkbtn").show();
    else
    $("#checkbtn").hide();
});

Answer 1

试试这个，

$("#checkbtn").hide();
$("#answer > div").click(function (e) {
    $(this).find("input[type=checkbox]").trigger("click");

});
$("input[type=checkbox]").click(function (e) {

    $(this).parent().siblings('div').slideToggle();
    $("#checkbtn").toggle();

    e.stopPropagation();
});

Fiddle

修改

    var btncounter = 0;
$("#checkbtn").hide();
$("#answer > div").click(function (e) {
    if (!$(this).find("input[type=checkbox]").attr("disabled")) {
        $(this).find("input[type=checkbox]").trigger("click");
    }
});
$("input[type=checkbox]").click(function (e) {
    $("input[type=checkbox]").not(this).attr("disabled", true);
    $(this).parent().siblings('div').stop().slideToggle("slow", function () {
        $("input[type=checkbox]").not(this).removeAttr("disabled");
    });
    $("#checkbtn").toggle();

    e.stopPropagation();
});

$("#checkbtn").click(function(){
   alert($("input[type=checkbox]:checked").parent().text());
});

Updated fiddle

Answer 2

尝试

$("#checkbtn").hide();

var $checks = $("#answer > div input:checkbox").change(function (e) {
    $divs.stop(true);

    var $div = $(this).parent();
    var $sibs = $divs.not($div)[this.checked ? 'slideUp' : 'slideDown']();
    $div.slideDown();

    $sibs.find('input:checkbox').prop('checked', false);
    $("#checkbtn").toggle($checks.filter(':checked').length > 0);
})

var $divs = $("#answer > div").click(function (e) {
    if (!$(e.target).is('input')) {
        $(this).find("input:checkbox").prop("checked", function (i, checked) {
            return !checked;
        }).change();
    }
});

演示：Fiddle