Radio按钮限制文本输入框

开发工具与关键技术：vs  jquery
作者：黄海峰
撰写时间：2019.07.07

我通过两个单选框按钮来控制input文本框是否能输入数据，在这两个radio按钮中分别给true值和false值，然后当我们选中false值的按钮时，我们就限制文本框让他变成只读的状态，选中true值的radio按钮时，文本框就可以输入数据。
< input type=“radio” name=“ifSiteService” id=“ifSiteServiceTrue” class=“custom-control-input” value=“true” checked />
< input type=“radio” name=“ifSiteService” id=“ifSiteServicefalse” class=“custom-control-input” value=“false” />
< input type=“text” class=“form-control” id=“SiteService” name=“SiteService” />
我当时想的是直接获取到radio的值，然后通过判定这个值是true还是false来是否限制文本框，因为radio是单选框，只能选择一个点亮。但是结果不行，因为两个radio都有值，我通过name名来获取值得时候，我点击false的时候，文本限制成功，但是点击true的时候，他还是被限制的状态，所以失败，然后我通过查找资料找到了一个input标签的事件监听方法，就是oninput，我们通过事件监听能够获取到值是否发生改变，如果发生了改变，那么就获取到这个值，通过这个值是false还是true，来判断是否限制文本框，但是在IE浏览器里缺不兼容oninput方法，不过IE浏览器自带了一个propertychange方法，这个方法和oninput效果一样。都是监听input标签的。不过通常oninput和propertychange都是一起出现的。因为要考虑代码的兼容性，所以需要将他们成双成对的出现。
jQuery写法：
$(‘input:radio[name=ifSiteService]’).on(‘input propertychange’, function () {
var ifSiteService = $(‘input:radio[name=ifSiteService]:checked’).val();
console.log(ifSiteService)
if (ifSiteService = = “false”) {
$("#SiteService").attr(“readOnly”, “true”);
} else if (ifSiteService == “true”) {
$("#SiteService").attr(“readOnly”, false);
}
});

这里我们用了jQuery的属性操作attr()方法，这个方法设置或返回被选元素的值。根据该方法不同的参数，其工作方式也有差异。
通过attr()方法我们传入参数readyOnly，这是一个HTML属性，可以设置或者返回是否为只读的状态。
然后我们可以看下实际效果的图片演示：

然后是选中否文本框就会变为只读：