无法根据复选框选中属性在按钮中添加/删除禁用属性答案

【问题标题】：Unable to add/remove disabled attribute in button based on checkbox checked property无法根据复选框选中属性在按钮中添加/删除禁用属性
【发布时间】：2023-04-04 21:21:02
【问题描述】：

jquery：

<script type="text/javascript">

function  enableDisableButton() {

    var isChecked = ($('input[name=ignore-checkbox]').is(':checked'));

    if (isChecked == true) {
        $("button[name=set-up-account]").removeAttr("disabled");
    }
    else {
        $("button[name=set-up-account]").attr("disabled", "disabled");
    }

}

$('#mobilePage').live('pageinit', function (event) {    //document ready for jquery mobile

    enableDisableButton();

    $('#ignore-checkbox').bind("change", function () {
        enableDisableButton();
    });

});
  </script>

HTML：

 @using (Html.BeginForm("Account", "SetUpAccount", FormMethod.Post, new { @id = "account-set-up", @data_ajax = "false" }))
 {       

     <div class="ui-grid-a field">
        <div class="ui-block-a" style="width:140px;">
         <label for="ignore-checkbox">Ignore</label>
         <input type="checkbox" name="ignore-checkbox" id="ignore-checkbox"/>
        </div>
     </div>

     <div style="width:100%;float:left;">
         <button type="submit" name="set-up-account" id="set-up-account"  data-inline="true"  data-mini="true">Set Up Account</button>
     </div>
  }

我想根据复选框选中的属性启用/禁用Set Up Account 按钮。如果选中复选框，则启用按钮，否则禁用。在页面加载时，我正在禁用按钮

我面临的问题是，

在页面加载时，它禁用了按钮，但它没有根据复选框的更改事件添加/删除禁用的属性，我签入了 firebug，它根据选中和未选中的值正确进入循环。

注意：我使用的是 Jquery mobile 1.2 和 jquery 1.7。同样在发布之前我在谷歌搜索，有很多帖子在启用和禁用基于复选框选中值的按钮下。但没有一个能解决我的问题。

有什么问题？请帮帮我

谢谢...

【问题讨论】：

您的代码运行良好，请参见此处的演示：jsfiddle.net/dwzGf/2:) 点击复选框，您将看到按钮的启用和禁用
但是在我的页面中它没有在选中复选框时删除 disabled 属性，可能是因为 jquery mobile 的原因？
试试这个 - 小改动：jsfiddle.net/26n4M/1 而不是 (isChecked == true) 只是做 (isChecked) ，它应该在 JQ M :) 中工作
@Tats_innit 是的，现在它启用了选中复选框的按钮，但如果 ischecked 为 false，它不会禁用
在这里工作演示 jsfiddle.net/KGvve :)

标签： jquery jquery-mobile

【解决方案1】：

试试这个

$("input[name=ignore-checkbox]").click(function() {
  $("button[name=set-up-account]").attr("disabled", this.checked);
});

DEMO

【讨论】：

是的，试过了，它触发了点击事件，但没有启用按钮
你检查过演示吗？当您选中或取消选中复选框时，它的启用和禁用按钮
这是解决方案之一。现在由您根据需要对其进行修改以使其正常工作。

【解决方案2】：

由于 Jquery Mobile，它没有启用按钮。在 JQM 中，我们需要刷新表单元素，同时对其进行操作

解决办法是

    function  enableDisableButton() {

    var isChecked = ($('input[name=ignore-checkbox]').is(':checked'));

    if (isChecked) {
        $("button[name='set-up-account']").removeAttr("disabled").button('refresh');
    }
    else {
        $("button[name='set-up-account']").attr("disabled", "disabled").button('refresh');
   }
}

$('#mobilePage').live('pageinit', function (event) {

    enableDisableButton();

    $('#ignore-checkbox').bind("change", function () {
        enableDisableButton();
    });
});

问题通过添加解决了

.button('refresh');

【讨论】：

【解决方案3】：

喜欢这个

  $('#setagb').change(function(){
        if ($(this).is(':checked'))
        {
            $("#submit").removeAttr("disabled");
        }
        else
        {
            $("#submit").attr( "disabled", "disabled" );
        }               
  });

【讨论】：

【解决方案4】：

我不确定这是否有助于解决您的主要问题，但根据http://api.jquery.com/prop/，您应该使用 .prop() 函数而不是 .attr() 和 .removeAttr( ) 函数。

添加属性：

.prop("disabled", true);

要删除属性：

.prop("disabled", false);

我在寻找上述信息时偶然发现了这个问题，所以我想我会分享。

【讨论】：