PS

Question

我想在选中复选框时禁用日期选择器。但我不能禁用input-group-addon。即使禁用了文本输入，用户也可以单击范围并选择日期。

如何禁用它？

这是我的HTML代码：

<div class="col-md-4">
    <div class="control-group">
        <div class="input-group date" id="deb">
            <div class="input-group-addon">Du</div>
            <input id="dateDebut" type="text" class="form-control">
        </div>
    </div>
</div>
<div class="col-md-4">
    <div class="control-group">
        <div class="input-group date" id="end">
            <div class="input-group-addon">Au</div>
            <input id="dateFin" type="text" class="form-control">
        </div>
    </div>
</div>
<div class="col-md-3 checkbox">
    <label> <input id='toutVisu' type="checkbox">Visu</label> 
</div>

这是我的js代码：

$('input#toutVisu').on('change', function(){

    if($(this).is(':checked')){
        $("div.date input").prop("disabled",true)
        $("div.date input").val("")

        msg = $('#messToutVisu').val()
        msgAlert = afficheAlert("danger",msg)
        $("div#histoRapport").append(msgAlert)
        deleteAlert()
    }else{
        $("div.date input").prop("disabled",false)
    }
})

我尝试了很多东西来禁用这个输入，但没有任何效果。所以我放弃了已经制作的东西。

谢谢

Answer 1

.unbind()从元素中删除以前附加的事件处理程序。

$('input#toutVisu').on('change', function(){

    if($(this).is(':checked')){
        $("div.date input").prop("disabled",true)
        $("div.date input").val("")
        $(".input-group-addon").unbind('click');
        msg = $('#messToutVisu').val()
        msgAlert = afficheAlert("danger",msg)
        $("div#histoRapport").append(msgAlert)
        deleteAlert()
    }else{
        $("div.date input").prop("disabled",false)
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-4">
    <div class="control-group">
        <div class="input-group date" id="deb">
            <div class="input-group-addon">Du</div>
            <input id="dateDebut" type="text" class="form-control">
        </div>
    </div>
</div>
<div class="col-md-4">
    <div class="control-group">
        <div class="input-group date" id="end">
            <div class="input-group-addon">Au</div>
            <input id="dateFin" type="text" class="form-control">
        </div>
    </div>
</div>
<div class="col-md-3 checkbox">
    <label> <input id='toutVisu' type="checkbox">Visu</label> 
</div>

Answer 2

＆＃13;

$('input#toutVisu').on('change', function(e) {

  var isDisabled = $(this).is(':checked');
  $("#toDisable").prop("disabled", isDisabled)
  if(isDisabled){
    $('#end, #deb').datepicker('remove');
  }else{
    $('#end, #deb').datepicker();
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<fieldset id="toDisable">
  <div class="col-md-4">
    <div class="control-group">
      <div class="input-group date" id="deb">
        <div class="input-group-addon">Du</div>
        <input id="dateDebut" type="text" class="form-control">
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="control-group">
      <div class="input-group date" id="end">
        <div class="input-group-addon">Au</div>
        <input id="dateFin" type="text" class="form-control">
      </div>
    </div>
  </div>
</fieldset>
<div class="col-md-3 checkbox">
  <label> <input id='toutVisu' type="checkbox">Visu</label>
</div>

＆＃13;

Answer 3

附加事件onchange可能不起作用，因为更改必须发生onchange to fire。如果选中复选框，请尝试在mousedown和touchend上附加事件并在其中调用event.preventDefault() + event.stopImmediatePropagation()。

或者，您也可以使用focusin

之前触发的change事件

PS

根据你发布的内容，我看不到那些跨度，但是 ssuming它们是输入的previousElementSibling （你可以简化下面的内容，但我会为你快速测试而写）：

$("div.date input").prev()
.on("touchend",function(e){
    if($('input#toutVisu').is(':checked')){
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
    }
}).on("mousedown",function(e){
   if($('input#toutVisu').is(':checked')){
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
   }
}).on("click",function(e){
   if($('input#toutVisu').is(':checked')){
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
   }
})

添加上述之前，您可以向这些元素添加任何自定义事件处理程序。你可能需要在touchstart上调用上面的内容，但Chrome会抱怨该事件是被动的，所以你需要事先进行设置。

禁用input-group-addon

3 个答案:

PS