javascript - Is there a way to blur/highlight the text of a radio button?

Question

I have a form. When the user clicks "disable" I want to disable all the radio button and also blur/highlight the text so that it looks more "disabled".

How can I do that?

I tried adding a class to that element and using the blur function but it doesn't work. If editing the text CSS is impossible, is it possible to change the color of the button or put a border around the text?

Answer 1

我不确定你的问题是什么，任务看起来很简单。只要您想支持旧版本的 Internet Explorer，就没有真正的 CSS 方式来模糊文本，但改变它的颜色应该没问题。这是一个简单的例子：

$(function() {
    $('#disable').on('click', function() {
        $('#myradio').attr('disabled', 'disabled').parent().addClass('disabled');
    });
})

现场演示 - http://jsfiddle.net/Pharaon/ggzjF/

Answer 2

该blur功能实际上并没有（视觉上）模糊任何东西。它从元素中移除焦点。没有任何代码很难为您提供帮助，但这应该可以帮助您：

如何使用 CSS3 模糊文本

要禁用单选按钮的单击，请设置disabled属性。

<input type="radio" disabled>

Answer 3

演示：http: //jsfiddle.net/RXs8B/1/

HTML

<input type="radio" id="radio" value="1" />
<label for="one" id="forRadion">First Item</label>
​&lt;button id="blur">blur it</button>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

jQuery

​$(function(){

    $("#blur").click(function()
                     {
                        $("#forRadion").css("color","#F00"); 
                         $("#radio").attr("disabled","true");//apply you own blur color
                     });
});​

Answer 4

$(function() {
    $('#disableBtn').on('click', function() {
        $('#formId input').attr('disabled', 'disabled').addClass('disabledClass');
    });
})