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