禁用输入组插件

Question

我想在选中复选框时禁用日期选择器。但我不能禁用输入组插件。即使文本输入被禁用，用户也可以单击跨度并选择一个日期。

如何禁用它？

这是我的 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

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

<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>

Answer 2

.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 3

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

或者，您也可以使用在change 之前触发的focusin 事件

PS

根据您发布的内容，我看不到这些跨度，但假设它们是输入的 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 会抱怨该事件是被动的，因此您需要事先进行设置。