点击复选框，按钮禁用/启用

骑猪看日落 2022-08-20 10:29 269阅读 0赞

长话短说，一个小功能，按钮最开始的时候是禁用，选择复选框后，按钮启用，再点击一下，按钮禁用。

![Center][]

本次使用angularjs混合jquery来使用,先看页面元素;

<div class="form-group">
    				<div class="col-sm-12" align="center">
    					<input type="checkbox"  ng-click="pitchOn()"> 我已阅读并同意协议条款
    					<button class="btn btn-primary" ng-click="addSigningPay()" disabled="disabled"  id="signingPay">签约并支付</button>
    				</div>
    			</div>

这里按钮使用了disabled,先说一下这个元素;

表单中readOnly和disabled的区别：

Readonly只针对input(text/ password)和textarea有效，而disabled对于所有的表单元素都有效，包括select,radio, checkbox, button等。

但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去（这种情况出现在我们将某个表单中的textarea元素设置为disabled或readonly，但是submitbutton却是可以使用的）。

**js操作：**

function disableElement(element,val){
    document.getElementById(element).disabled=val;
    }

**jQuery进行操作：**

//两种方法设置disabled属性
    $('#areaSelect').attr("disabled",true);
    $('#areaSelect').attr("disabled","disabled");
    //三种方法移除disabled属性
    $('#areaSelect').attr("disabled",false);
    $('#areaSelect').removeAttr("disabled");
    $('#areaSelect').attr("disabled","");

**获取s:textfield，并设置其disabled属性：**

functiondisableTextfieldofAccountDiv(element,val) {
    $(element).find(":textfield").attr('disabled',val);
    }

我们给check框添加了点击事件，后台只要去判断check框是否选中，而更改按钮的disabled属性就OK了;

$("#signingPay").attr("disabled",!$("input[type='checkbox']").is(':checked'));

[Center]: /images/20220731/f78649205cfd4b6d8452bd1f5e38254e.png