[英]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.