禁用Radiobuttons不显示灰色(表现为只读)

时间:2011-09-16 17:00:02

标签: jquery html radio-button dynamics-crm

我收到用户的请求,要求修改Microsoft CRM,使其只读字段不灰显,但仍然只读。通过检查DOM,我了解到无线电控件被设置为禁用。要完成此请求,我无法更改应用程序生成html的方式。但是,我确实能够在表单onload事件上运行javascript函数。我尝试了一些不同的方法,最近我尝试使用jQuery删除disabled属性并将事件处理程序附加到无线电,以便在用户尝试更改它们时更改其值。

使用这种方法,我了解到更改事件会触发用户单击的控件,但不会触发通过选择同一组中的另一个单选按钮取消选择的单选按钮。

为了得到这个,我尝试将一个自定义属性写入所有无线电控件,记录是否在加载页面时检查了它,然后是一个事件处理程序,它重置每个单选按钮上的checked属性,并带有自定义属性。任何单选按钮的更改事件触发时的原始值。然而,这种方法对我来说也不起作用。我将包括一个示例应用程序来展示我的方法。我很感激帮助修复我的代码,或者使用不同的方法帮助满足这些需求。

我想再次提出要求,以便我提出任何解决方案。

  1. 只需要将解决方案写入IE。
  2. 我无法控制生成的HTML,只能编写javascript。
  3. 设置为已禁用的字段需要以黑色呈现,而不是灰显。
  4. 用户必须无法更改这些字段的值。

    <script src="js/jquery.1.6.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //Set custom attribute for disabled checked radio's
            $('input:radio:disabled:checked').attr('custom:bmiChecked', "true");
            //set custom attribute for disabled unchecked radio's
            $('input:radio:disabled:not(:checked)').attr('custom:bmiChecked', "false");
            //select disabled radio's and then filter to radio's that have the custom attribute set
            $('input:radio:disabled').filter(function () {
                return $(this).attr('custom:bmiChecked');
            }).each(function () {
                //attach a click event handler
                $(this).click(function () {
                    //In the event handler select all radio's that have the bmiChecked attribute
                    $('input:radio').filter(function () {
                        return $(this).attr('custom:bmiChecked');
                    }).each(function () {
                        //For each of these radio's set their checked property to the original value from the page load.
                        if ($(this).attr('custom:bmiChecked') == "true") {
                            $(this).attr('checked', "").css({ 'border': '5px solid green' });
                        }
                        else {
                            $(this).attr('checked', "checked").css({ 'border': '5px solid red' });
                        }
                    });
                });
            });
            //remove all the disabled properties from radiobutton's
            $('input:radio:disabled').prop('disabled', false);
        });
    </script>
    
    
    <input name="rad_new_bitfield2options" tabindex="1090" class="ms-crm-RadioButton" disabled="" id="Radio2" style="margin-left: 0px;" type="radio" value="1" checked="checked" />
    
    <input name="rad_new_bitfield2options" tabindex="1090" class="ms-crm-RadioButton" disabled="" id="Radio3" type="radio" value="2"  />
    

2 个答案:

答案 0 :(得分:2)

您可以让您的javascript将表单字段替换为其他html元素,例如包含相同数据的<p>元素。

这解决了需要禁用表单元素的问题,至少对我来说,更有意义。如果用户无论如何都无法改变这些值,为什么还要把它们组成元素?

处理试图拦截事件并采取措施防止正常行为也更为简单。

答案 1 :(得分:2)

@cdeszaq指出,这不是一个非常漂亮的解决方案。 但您需要做的就是“重新检查”最初选中的按钮。 Working Fiddle