Question

我有一个禁用的选择元素，如下所示，我无法查看其工具提示。

<div class="col-md-3">
        <select id="docpreset_colorformat" class="select2" name="docpreset_format_to" placeholder="Document format to"></select>
</div>

要禁用的jQuery：

$("#docpreset_colorformat").prop("disabled", true);

添加工具提示的jQuery

$("#docpreset_colorformat").prop('title', 'Disabled for selected doc type: ' + format_to);

工具提示适用于页面上的其他元素，例如“输入”类型。

不确定我在这里缺少什么。

任何帮助将不胜感激，例如到旧帖子的链接或提示。

Answer 1

我已经进行了一些研究，select2插件没有提供任何选项（实际上）来禁用为当前所选选项呈现的默认标题。这就是我的方法：

1），使用下一种解决方法禁用具有所选值的标题呈现：

$('.select2-selection__rendered').removeAttr('title');

2）将包装容器元素添加到选择控件，然后设置要呈现给该包装的标题。在我展示的示例中，我使用了<spam>元素，例如包装器。

请检查下一个示例，第一个选择控件已实现了前面说明的解决方法，而另一个是标准的：

$(document).ready(function()
{
    // Initialize select2 controls.

    $(".select2").select2();
    
    // Workaround for disable title rendering on the select2 plugin.

    $('.select2-selection__rendered').removeAttr('title');

    // Customize the "#sel1" control.

    $("#sel1").prop("disabled", true);
    $("#sel1").parent().prop("title", "Custom title for select control");
});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<div class="container-fluid">
<div class="row">

  <div class="col-6">
    <spam>
    <select id="sel1" class="select2 form-control" placeholder="Placeholder...">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    </spam>
  </div>

  <div class="col-6">
    <select id="sel2" class="select2 form-control" placeholder="Placeholder...">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
  </div>
  
</div>
</div>

如何使用jQuery将工具提示添加到禁用的选择元素

1 个答案: