Django: The page shows "(

I was trying include a checkbox on my template, but it showed me some text on the browser instead.

I have a form (forms.py) that contains boolean field, e.g:

Class MyForm(forms.Form):
    my_checkbox = forms.BooleanField(required=False, label='my_checkbox')

and I have the following in my templates/my_app/my_form_template.py:

<form id="form" method="post">
    
<form>

In the browser after running the server, I've got: (<django.forms.fields.BooleanField object at 0x0000014BE3CF9208>,)

The CharField and ChoiceField work perfectly except BooleanField. What is a way to represent a checkbox on the template?

I've tried in the template and it shows the checkbox, but I wish to custom the attributes of the checkbox.

Pass back multiple selected Checkbox Options using Razor in MVC

I am using ASP.NET MVC to populate a group of checkboxes. These checkboxes change depending on what the user selects on the previous view. I am using Razor. In the view I have:

    @foreach (var skills in Model.SkillsAvailable)
    {
        <input name="pack" type="checkbox" value="@skills" /> @skills<br />
    }

    @Html.HiddenFor(m => m.SkillsSelected, new { @class = "hidden" })

I have a few others that look nearly identical to this but are single selection radio buttons. It functions by jQuery taking the selected option on change and populating the HiddenFor. The HiddenFor is passed to the control upon submit. No issues with that.

But for my checkbox, I'm not sure how to send multiple items back. If this list populates 10 items, and the user can only select 2, how do I add them to List<string> SkillsSelected?

My first instinct is that I can add somehow using another foreach loop (like foreach that is selected, add to a list). But I have no idea what that looks like, and Google searching isn't bringing anything up except for using bools, which makes sense if the list is the same every time, but not if the list has between 5 and 30 options depending on the previous selection.

At this point in time, I don't have any jQuery controlling this section, so I don't have code for it. My controller is populating the list of checkboxes just fine, but not handling anything else.

The only properties in my model that matters are these, and I have no problem changing them in necessary.:

    public List<string> SkillsAvailable { get; set; }
    public List<string> SkillsSelected { get; set; }

Get the status of a v-checkbox Vue.JS Vuetify

I'm building a group of v-checkboxes

              <div class="row form-group" v-for="(author, key) in authorData" :key="key">

                <v-checkbox
                    label
                    :key="author.PmPubsAuthorID"
                    v-model="author.checked"
                    v-bind:id="author.PmPubsAuthorID.toString()"
                    color="success"
                    @change="authorCBClicked()"
                  ></v-checkbox>

How can I determine the status of the checkbox checked or unchecked? I've Googled and have not found the answer. I don't want to use the dom object and would like to stay with Vue structure.

I've tried

      @change="authorCBClicked(key)" 

but that did not help. As you can tell I'm a Vue new users so any help is very much appreciated .

Angular - Primeng : Cross lebel of checkbox when checked

How can i use CSS to cross the label of a checkbox of primeng when i check it :

<p-checkbox value="test" label="test"> </p-checkbox>

My checkbox :

Needed checkbox :

Javascript: preventDefault on checkboxLabel not working as expected

I'm using a hidden checkbox with a visible label (the color of the label reflects the checkbox's state). The user can click the label to switch the background color of the page, but only if some condition (in my fiddle represented by a checkbox) is met. If the condition gets falsy, the color changes respectively. There also is a [default] button to restore initial condition value.

Check my fiddle below for a working example.

To "block" the checkbox when the condition is false, I use a return statement in the onclick command of the checkbox label. This seems to be working quite fine, except for one case:

1. Enter the page; uncheck condition checkbox. Colored background is disabled, correct.
2. Click [change color]. Switching colors is rejected, that's fine.
3. Now click default; warning says "disabled", which is wrong, because it was already disabled and should be enabled; but the $('checkboxLabel').click(); command didn't change the checkbox's value

So the problem is with the .click() behaviour; it seems checkboxLabelOnclick() returns true (which is correct, as our condition is now true), but the checkbox click is not triggered

    function updateCheckbox() {
        if ($('checkbox').checked ^ $('condition').checked) {
                                        // checkbox is false before "clicking"
            $('checkboxLabel').click();
                                        // checkbox is still false, although it was "clicked"
            if (!$('checkbox').checked) {
                alert('disabled')
            }
        }
    }

https://jsfiddle.net/0bjy3c2r/3/

Checkbox angular material modify styles without (deprecated) /deep/, >>>, and ::ng-deep

How modify the style of the mat-checkbox component is a checkbox angular material, before. I had them modified with ::ng-deep and it worked but recently I saw in the angular page that it is obsolete and will soon be removed from browsers: https://angular.io/guide/component-styles

I also can't use encapsulation: ViewEncapsulation.None because styles could affect the global page

input field not displaying when checked each checkbox

1. I have Two checkbox
2. First one checkbox already checked
3. if checkbox check then display the input field( it is working).
4. when im checked other checkbox then first checkbox should unchecked automatically(working)
5. The problem is when the first unchecked then input field are not disappearing which is generated by first checkbox. here is my code.

$('#Experience').click(function(){
    if($(this).is(':checked')){
          var tb = $('<input type="number" name="totalyr" min="0" id="common" placeholder="Total Year Experience" class="form-control col-xs-3" required><input type="number" name="totalmn" min="0" id="common" class="form-control col-xs-3" placeholder="Total Month Experience" required><br><input type="text" name="currentjob" id="common" class="form-control col-xs-3" placeholder="Current Job Title" required><input type="text" name="currentjob" id="common" class="form-control col-xs-3" placeholder="Current Company Name" required><br><input type="number" id="common" name="rupee" min="0" class="form-control col-xs-3 fa fa-rupee" placeholder="Annual Salary ₹:" required>');
          $(this).after(tb)  ;
    }
    else if($(this).siblings('#common').length>0){
        $(this).siblings('#common').remove();
    }
})

/*Here for second field*/

$('#Fresher').click(function(){
    if($(this).is(':checked')){
          var tb = $('<input type="text" name="lookingfor" min="0" id="common" placeholder="Currently Looking For" class="form-control col-xs-3" required>');
          $(this).after(tb)  ;
    }
    else if($(this).siblings('#common').length>0){
        $(this).siblings('#common').remove();
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<table>
    <tr>
        <td>
            <input type="checkbox" class="radio" value="1" id="Fresher" name="" checked />
            <input type="checkbox" class="radio" value="1" id="Experience" name="" />
        </td>
    </tr>
    </table>

Here u can see, if i select second checkbox then first checkbox generated input field is not disappearing