Question

我有两个div absolute位置这是一个代码。

<input type="button" onclick="showdiv()" value="show" >
<div id="div2" style="display:none"> 
   some content
  <a href="anylink">name</a>
  <input type="button" value="click">
</div>
<div id="div1"> 
   some content
  <a href="anylink">name</a>
  <input type="button" value="click">
</div>

这是jquery代码。

function showdiv(){
   $('#div1').fadeTo("slow",0.15);
   $('#div2').show();   
}

点击show按钮fadeTo div1并显示div2。但问题是div1链接和按钮也可以点击，div2的链接和按钮无法点击。
如何禁用后台链接。

Answer 1

$('#div1').unbind('click').click(function(e){
   e.preventDefault();
});

如果#div1上有任何onclick-listener，则可以直接完成。在较新的jquery版本中，你可以做

$('#div1').off('click').click(function(e){
   e.preventDefault();
});

但是我再也不会推荐这样的解决方案，而是宁愿通过使用位于#div1之上的透明div来解决这个问题。

示例：

<div id="div1holder" style="position:relative">
  <div id="div1">
  </div>
  <div id="div1blocker" style="display:none; position:absolute;top:0; left:0; background:transparent;">
  </div>
</div>

让#div1blocker表现得像#div1一样考虑大小，并在需要阻止时调用$('#div1blocker').show()。

function showdiv() {
  var div1 = $('#div1');
  $('#div1blocker').show().width(div1.width()).height(div1.height());
  $('#div2').show();
}

当然，你仍然可以使用淡化：

function showdiv() {
  var div1 = $('#div1');
  $('#div1blocker').show().width(div1.width()).height(div1.height());
  $('#div2').show();
  div1.fadeTo("slow",0.15);
}

Answer 2

    $('#div1 a').bind("click", function (e) {
        e.preventDefault();
    });
   $('#div1 input').prop('disabled', false);

应用css将其显示为已禁用。 fadeTo不会导致解除绑定事件。我给了你一般的解决方案。

Answer 3

.fadeTo只会改变元素和子元素的不透明度。为了“禁用”它们，还需要采取其他措施。

HTML：

<input type="button" id="showdiv" value="show">
<div id="div1">some content <a href="anylink">name</a>
    <input type="button" value="click">
</div>
<div id="div2" style="display:none">some content <a href="anylink">name</a>
    <input type="button" value="click">
</div>

JS：

这会使<div>和内容保持可见，但“已禁用”。

$("#showdiv").on("click", function () {
    $('#div1').fadeTo("slow", 0.15, function () {
        $('#div1').children().prop('disabled',true);
        $('#div1 a').bind('click', false);
    });
    $('#div2').show();
});

JSFiddle

在jQuery中禁用（不可点击）背景内容

3 个答案: