簡體   English   中英

單擊一個div並獲取值時禁用同級div

[英]Disable sibling div when one of the div is clicked and get the value

當我單擊其中一個DIV時,它將在DIV中找到復選框並“檢查”它。 因此,其他DIV將隱藏。 我在如何禁用其他DIV時遇到問題,當它隱藏自身時,否則我可以單擊其他DIV並僅留下被單擊的DIV破壞了最初的想法。

2)我如何獲得檢查的股利的價值?

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();
});

這樣嘗試

$("#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();
});

小提琴

編輯

    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());
});

更新的小提琴

嘗試

$("#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();
    }
});

演示: 小提琴

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM