jquery - 启用嵌套在禁用的 jQuery 移动复选框中的

Question

我正在使用 jQuery Mobile CheckboxRadio 小部件在移动网站上显示复选框列表。 (http://demos.jquerymobile.com/1.4.3/checkboxradio-checkbox/)每个复选框内嵌套有复选框文本/标签，以及带有“Enable”一词的 span 元素。我给了跨度一个 onclick，它现在只执行 alert("HI") 但这是我希望它执行的操作:

我希望复选框开始时处于禁用状态，然后通过单击复选框内的跨度，复选框将启用。以编程方式启用该复选框很简单，但问题是这样的:

当 jQuery 复选框设置为禁用时，它会禁用其中的所有内容 - 包括具有 onclick 来启用它的跨度!

<fieldset data-role="controlgroup">
  <label>
    <input type="checkbox" id="checkbox1" disabled> <span onclick="enable()">Enable</span> Text of checkbox here.</label>

  <label>
    <input type="checkbox" id="checkbox1" disabled> <span onclick="enable()">Enable</span> Text of checkbox here.</label>

  <label>
    <input type="checkbox" id="checkbox1" disabled> <span onclick="enable()">Enable</span> Text of checkbox here.</label>

</fieldset>

有什么方法可以只启用文本框的那部分吗？或者也许禁用的复选框的某些属性可以通过 span 元素内联更改？我尝试过，但没有成功，因为我不明白当复选框禁用时幕后会发生什么。 p>

Answer 1

启用使用 html disabled 属性禁用的元素的唯一方法是在其周围包裹一些东西。

A form control that is disabled must prevent any click events

Source

解决此问题的最佳方法是使用 jquerymobile attr data-disabled="true"
也许您必须使用一些 css 来设置标签的样式。

		
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

		
<label>
     <input name="checkbox-0 " type="checkbox" disabled>disabled
</label>
<label>
     <input name="checkbox-1 " type="checkbox" data-disabled="true">data-disabled -- <span onclick="alert('hi')">Enable</span>
</label>
<label>
    <input name="checkbox-2 " type="checkbox">enabled
</label>