locked
How to add a checkbox onclick attribute with a value by javascript? RRS feed

  • Question

  • User991566988 posted

    Hi

    I'm using asp.net core 2.1.

    I have this checkbox:

    <input type="checkbox" asp-for="Finish" id="uf"/>

    I want to add an onclick attribute like this "onclick="this.checked=!this.checked;" to it when some event occurred to prevent the user update it again after it is checked. I have this JS:

            var uf = JSON.parse('@Html.Raw(Json.Serialize(Model.Finish))');
            if (uf == false) {           
                $(function () {
                    $('#btnSave').click(function (e)
                    {
                        if ($('#uf').is(":checked")) {
                             e.preventDefault();
                            $('#confirmDialog').dialog('open');
                        }
                    });
                    $("#confirmDialog").dialog({
                        autoOpen: false,
                        modal: true,
                        resizable: false,
                        buttons: {
                            "OK": function () {
                                $('#form').submit();
                                //document.getElementById("uf").onclick = function() { conn.send('this.checked=!this.checked'); };
                                //document.getElementById("uf").disabled = true;
                            },
                            "Cancel": function (e) {
                                $(this).dialog("close");
                            }
                        },
                    });
                });        
        }

    I searched a lot in the internet with no solution found. How to perform this to prevent the user from updating the checkbox again by adding the onclick property with the value "this.checked=!this.checked" as I mentioned?

    Saturday, May 2, 2020 12:09 PM

All replies

  • User475983607 posted

    I want to add an onclick attribute like this "onclick="this.checked=!this.checked;" to it when some event occurred to prevent the user update it again after it is checked. I have this JS:

    This is the wrong approach.   you should disable the checkbox input when an event occurs.   Can you clarify the requirement for disabling the check?  What is the event?

    Saturday, May 2, 2020 12:41 PM
  • User991566988 posted

    I want to disable it but this way it is not posted to the action when submitting, so I'm trying to use onclick attribute with the value I mentioned instead which keeps its value when submitting.

    I want to disable it because it is about a project final agreement from the client for his finished project, So after checking it I want to prevent the client to uncheck it again.

    The event of making it non editable is after submitting with conditions above.

    Thanks

    Saturday, May 2, 2020 1:19 PM
  • User475983607 posted

    I want to disable it but this way it is not posted to the action when submitting, so I'm trying to use onclick attribute with the value I mentioned instead which keeps its value when submitting.

    I want to disable it because it is about a project final agreement from the client for his finished project, So after checking it I want to prevent the client to uncheck it again.

    The event of making it non editable is after submitting with conditions above.

    Thanks

    Then use a radio button not a checkbox.  Before you complain that you do not like the way a radio button looks, you can always change the appearance using CSS.  There are many examples you can find online with a simple internet search.

    Saturday, May 2, 2020 2:09 PM
  • User-474980206 posted

    I want to disable it but this way it is not posted to the action when submitting, so I'm trying to use onclick attribute with the value I mentioned instead which keeps its value when submitting.

    I want to disable it because it is about a project final agreement from the client for his finished project, So after checking it I want to prevent the client to uncheck it again.

    The event of making it non editable is after submitting with conditions above.

    Thanks

    when you disable it checked, add a hidden with the same name and value. If you enable the checkbox delete or disable the hidden.

    Saturday, May 2, 2020 6:39 PM
  • User288213138 posted

    Hi musbah7,

    I want to add an onclick attribute like this "onclick="this.checked=!this.checked;" to it when some event occurred to prevent the user update it again after it is checked. I have this JS:

    According to your description, i made demo for you.

     <script>
            function abc() {        
                $('#Checkbox1').prop("checked", true);
            }
            $(function () {
                $('#Checkbox1').click(function () {           
                    if (!this.checked) {
                       this.checked = !this.checked
                   }
                });
            })
        </script>
    
    
    <input id="Button1" type="button" value="button" onclick="abc()" />
    
    <input id="Checkbox1" type="checkbox"/>

    Best regards,

    Sam

    Tuesday, May 5, 2020 3:50 AM
  • User-1151440187 posted

    As you said , First we can check and uncheck the checkbox but on button click checkbox state will remain same.

    I want to correct the answer by samwu as :


    <script>
    function abc() {
    $('#Checkbox1').click(function () {
    if (!this.checked) {
    this.checked = !this.checked
    }
    });
    }
    </script>

    <input id="Button1" type="button" value="button" onclick="abc()" />

    <input id="Checkbox1" type="checkbox"/>

    I hope it'll help you.

    Thanks!

    Tuesday, May 5, 2020 5:34 AM
  • User-474980206 posted

    but, the input is not disabled, so the user does not know it is set only. its trivial to disable and add hidden:

    $('#checkboxid').click(function() {
       if (this.checked) {
         this.disabled = true;
         $('<input type="hidden" />')
             .attr('name', this.name)
             .prop('value', this.value)
             .appendTo(this.form);
       }
    });

    or make callable function:

    <input type="checkbox" name="foo" value="somevalue" onclick"checkBoxDisable(this)" />
    
    
    <script>
    function checkBoxDisable(e) {
       if (e.checked) {
         e.disabled = true;
         $('<input type="hidden" />')
             .attr('name', e.name)
             .prop('value', e.value)
             .appendTo(e.form);
       }
    }
    </script>
    
    

    Tuesday, May 5, 2020 3:52 PM
  • User991566988 posted

    this works for checkbox itself only. but I want to do this after submit (at the word here):

            if (uf == false) {
                    $(function () {
                        $('#btnSave').click(function (e)
                        {
                            if ($('#uf').is(":checked")) {
                                 e.preventDefault();
                                $('#confirmDialog').dialog('open');
                            }
                        });
                        $("#confirmDialog").dialog({
                            autoOpen: false,
                            modal: true,
                            resizable: false,
                            buttons: {
                                "OK": function () {
                                    $('#form').submit();
                                    //Here
                                },
                                "Cancel": function (e) {
                                    $(this).dialog("close");
                                }
                            },
                        });
                    });        
            }

    Wednesday, May 6, 2020 8:41 AM
  • User-474980206 posted

    it doesn't matter what javascript does. because you are doing a form.submit(), the page will be reloaded and all dom changes will be lost. the server code should disable the checkbox.

    Wednesday, May 6, 2020 3:16 PM
  • User288213138 posted

    Hi musbah7,

    this works for checkbox itself only. but I want to do this after submit (at the word here):

     buttons: {
                                "OK": function () {
                                    $('#form').submit();
                                    //Here
                                },

    As bruce said, when you do a form.submit (), your page will be refreshed, then the checkbox will become the initial state.

    Can you talk about the application scenarios where you do this?

    Best regards,

    Sam

    Thursday, May 7, 2020 9:36 AM