Yii2：如何使用 jQuery 使 <div> 禁用/只读

Posted 2023-02-22

【中文标题】Yii2：如何使用 jQuery 使 <div> 禁用/只读

【英文标题】：Yii2: how to make a <div> disabled/readonly with jQuery

【发布时间】：2018-11-22 01:53:04

【问题描述】：

我需要在Yii2框架下禁用或只读yii2-date-picker-widget的图标。

datepicker 小部件有两部分：<span> 用于图标，<input> 用于日期。我可以使用 jQuery 禁用<input>，但我不能禁用<span>。

这是 jQuery 代码：

$("#movements-vencimiento").prop("disabled", true); // Works.
$("#vencimientoDiv").prop("disabled", true) // Not works.

这是 Yii2 代码：

<div class="col col-md-4" id="vencimientoDiv">
    <?= $form->field($model, 'vencimiento')->widget(\common\widgets\DatePicker::className(), [
        'convertFormat' => true,
        'pluginOptions' => [
            'format' => 'dd/mm/yyyy',
            'autoclose' => true,
            'language' => 'es-AR',
            'todayHighlight' => 'true',
        ]
    ]) ?>
</div>

这是 html 生成的代码：

<div id="vencimientoDiv">
    <div class="form-group field-movements-vencimiento">
        <label class="control-label" for="movements-vencimiento">Vencimiento</label>
        <div class="input-group date">
            <span class="input-group-addon">
                <i class="fa fa-calendar"></i>
            </span>
            <input type="text" id="movements-vencimiento" class="form-control" name="Movements[vencimiento]" disabled="">
        </div>
        <div class="help-block"></div>
    </div>
</div>

【参考方案1】：

div 没有disabled 属性。相反，您可以做的是删除导致日历显示的事件处理程序，如下所示：

$("#vencimientoDiv *").off();

就这么简单。

【参考方案2】：

您正在寻找的是适用于所有元素的pointerEvents，您可以在需要时禁用和启用点击返回。

请看下面的简单演示

$("#clicker").on('click', function(e) 
  e.preventDefault();
  alert("clicked");
);

$("#disab").on('click', function() 
  $("#clicker").css(
    pointerEvents: 'none'
  );
)

$("#enab").on('click', function() 
  $("#clicker").css(
    pointerEvents: 'auto'
  );
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#." id="clicker">click me</a>

<input type="button" value="Disable Click" id="disab">
<input type="button" value="enable Click" id="enab">

因此，在您的情况下，您将编写以下内容以禁用

$("#vencimientoDiv").css(pointerEvents:'none');

然后用

重新启用

$("#vencimientoDiv").css(pointerEvents:'auto');