jQuery: enable Check box (with Label For) on button click event

Question

I have written an editor template for check box view model,on rendering it executes following code:

@Html.LabelFor(x => x.Checked, Model.Label, new Dictionary<string, object> { { "for", Model.Name } })
@Html.CheckBoxFor(x => x.Checked, true, new Dictionary<string, object> { { "id", Model.Name }, { "name", Model.Name }, { "class", "custom" } })

Following Helper class method is written,

public static MvcHtmlString CheckBoxFor<TModel>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, bool>> expression, bool isReadonly, IDictionary<string, object> htmlAttributes)

in which check box with label is disabled on load.

And have button click event

   $(document).on('OnNewButtonClick', function (e) {
        alert("Entry");
        $("input:checkbox").removeAttr('disabled');
        $("input:text,textarea").removeAttr("readonly");
        $("input:text, input:radio, input:checkbox,textarea").css('background-color', 'transparent');
        $("input:checkbox").prop('disabled',false);
        alert("Exit");
    });

But it is not enabling the check box with label,same problem exists with radio button?

I tried every option to enable on button click.I am using ASP.Net MVC4,Html5,CSS3,jQuery for mobile app. Browsers using: IE, Firefox.

Hi, can you suggest some other ways because ultimately what you answered that I am doing like this,

 <script type="text/javascript">
    $(document).ready(function () {
        $(document).on("click", "#Newbutton", function (e) {
            $(this).trigger('OnNewButtonClick');
        });
    });
</script>           

Answer 1

Thank you guys for your support and help,here is my answer please correct me if I am wrong or there is another best solution available.

It seems that Html controls are loaded and once they are it internally applies CSS and many other things like events binding,name of class,div elements,etc.

So it is not possible to play with this extra things to enable/disable after getting loaded because it does not find a way of interaction among the elements.It has class name like 'ui-checkbox ui-state-disabled' and it is getting used at many places like in functions,events,its a kind of hard-coded values in html source code.

If we do state change on some click event,it removes state of check box but not of styles,so Beware of attributes/properties which are associated with style sheets.

What I did,instead of adding this attributes on rendering of control in 'htmlAttributes' parameter of helper method that I was doing in this method,

public static MvcHtmlString CheckBoxFor<TModel>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, bool>> expression, bool isReadonly, IDictionary<string, object> htmlAttribute{
    ...
    htmlAttributes["disabled"] = isReadonly;
    return htmlHelper.CheckBoxFor(expression, htmlAttributes);
    }

I added attributes once document is rendered/ready in a script as below,

<script type="text/javascript">
    $(document).ready(function () {
        alert('ready in partial');
        $("input:text, input:radio, input:checkbox,textarea").prop("readonly", true);
        $("input:radio, input:checkbox").prop('disabled', true);
        $("input:text, input:radio, input:checkbox,textarea").css('background-color', '#DEDEDE');
    });

which gives proper event handling and enable/disable of checkbox/radionbutton on conditional event like click of button.

Answer 2

Why you don't use this way

$(document).ready(
      $("#ButtonSelector").on('click',function(){
        alert("Entry");
        $("input:checkbox").removeAttr('disabled');
        $("input:text,textarea").removeAttr("readonly");
        $("input:text, input:radio, input:checkbox,textarea").css('background-color', 'transparent');
        $("input:checkbox").prop('disabled',false);
        alert("Exit");
    });
);