Question

我使用jQuery Mobile CheckboxRadio小部件来获取移动网站上的复选框列表。（http://demos.jquerymobile.com/1.4.3/checkboxradio-checkbox/）嵌套在每个复选框内的是复选框文本/标签，以及包含单词＆＃34;启用＆＃34;的span元素。我给了跨度一个onclick，现在只是alert("HI")，但这是我希望它做的：

我希望启用禁用复选框，然后点击复选框中的范围，复选框将启用。以编程方式启用复选框很简单，但问题是：

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

＆＃13;

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

＆＃13;

有没有办法只启用文本框的那部分？或者也许可以通过span元素内联更改已禁用复选框的某些属性？我尝试过玩耍，但无济于事，因为我不明白复选框后幕后会发生什么禁用。

Answer 1

启用使用html disabled attr禁用的元素的唯一方法是将它包裹起来。

禁用的表单控件必须阻止任何点击事件

Source

解决此问题的最佳方法是使用jquerymobile attr data-disabled="true"
也许你必须用一些CSS来标记你的标签。

＆＃13;

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

＆＃13;

Answer 2

我最终做的事情（如果有人发现并可以使用帮助）正在使用拆分列表视图。我将右侧的“启用”按钮作为小拆分图标，左侧复选框被禁用。

Answer 3

这里有一个解决方案，不完全完美，但有效

<fieldset>
            <label><input type="checkbox" id="checkbox1" disabled> <span id="clickable1">Enable</span> Text of checkbox here. </label>

            <label><input type="checkbox" id="checkbox2" disabled> <span id="clickable2">Enable</span> Text of checkbox here. </label> 

            <label><input type="checkbox" id="checkbox3" disabled> <span id="clickable3">Enable</span> Text of checkbox here. </label>

        </fieldset>

和JS如下

 $("#clickable1").click(function(){
$("#checkbox1").attr("disabled",false);
});
$("#clickable2").click(function(){ 
$("#checkbox2").attr("disabled",false);
});
$("#clickable3").click(function(){
$("#checkbox3").attr("disabled",false);
});

注意：需要记住的一件事是，没有两个ID可以是相同的，因为你已将每个复选框ID设为checkbox1，这是错误的

以下是工作示例 - JSfiddle

启用嵌套在禁用的jQuery移动复选框中的<span>

3 个答案: