locked
how can I change the checkbox button into dropdown listbox RRS feed

  • Question

  • User-1355965324 posted

    Hi

    I am trying to change the change the check box into radio button but not working please can you help how to make my code   into radio button rather than check box. Please can you help it would be very appreciated

    <div class="col-md-6">
    
                            <label class="control-label control-label-left   yellow_text" for="field1">Depot*</label>
    
                            <select id="dropdownDepot" class="form-control" multiple asp-for="Depot" asp-items="@ViewBag.UserDepots" data-role="select"></select>
                            
    
    
                        </div>
     
    
    
    $('#dropdownDepot').multiselect({
            columns: 2,
            placeholder: 'Select Depot',
            includeSelectAllOption: true,
            maxHeight: 300
        });

    Friday, February 1, 2019 9:07 AM

All replies

  • User-2054057000 posted

    Are you using some jQuery plugin to do this work?

    If not you can use Select2 which is excellent to change a normal select control to a multiselect one.

    This is how to use it:

    Add the following scripts and css links in your View:

    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

    Next, add select control in your View:

    <select id="dropdownDepot" name="dropdownDepot" asp-items="@ViewBag.UserDepots"></select>

    Now from your controller you can send the value using ViewBag like this:

    List<SelectListItem> data = new List<SelectListItem>() {
      new SelectListItem{Text="Tanks",Value="Tanks"},
      new SelectListItem{Text="Guns",Value="Guns"}
    };
    ViewBag.UserDepots= data;

    Thanks & Regards

    Friday, February 1, 2019 5:25 PM
  • User-474980206 posted
    You need to tell us which multiselect plugin you are using, you should pick one that is bootstrap css compatible
    Sunday, February 3, 2019 7:59 PM
  • User-1355965324 posted

    The Multiselect we are using Jquery Multiselect.css  https://github.com/nobleclem/jQuery-MultiSelect.

    Please can you advise how to fix this. It would be very appreciate.

    .ms-options-wrap,
    .ms-options-wrap * {
        box-sizing: border-box;
    }
    
    .ms-options-wrap > button:focus,
    .ms-options-wrap > button {
        ;
        width: 100%;
        text-align: left;
        border: 1px solid #aaa;
        background-color: #fff;
        padding: 5px 20px 5px 5px;
        margin-top: 1px;
        font-size: 13px;
        color: #aaa;
        outline-offset: -2px;
        white-space: nowrap;
    }
    
    .ms-options-wrap > button > span {
        display: inline-block;
    }
    
    .ms-options-wrap > button[disabled] {
        background-color: #e5e9ed;
        color: #808080;
        opacity: 0.6;
    }
    
    .ms-options-wrap > button:after {
        content: ' ';
        height: 0;
        ;
        top: 50%;
        right: 5px;
        width: 0;
        border: 6px solid rgba(0, 0, 0, 0);
        border-top-color: #999;
        margin-top: -3px;
    }
    
    .ms-options-wrap.ms-has-selections > button {
        color: #333;
    }
    
    /*.ms-options-wrap > .ms-options {
        ;
        left: 0;
        width: 100%;
        margin-top: 1px;
        margin-bottom: 20px;
        background: white;
        z-index: 2000;
        border: 1px solid #aaa;
        overflow: auto;
        visibility: hidden;
    }*/
    
        .ms-options-wrap > .ms-options {
             ; 
            
            width: 95%;
            margin-top: 1px;
            margin-bottom: 20px;
            background: #1e1777;
            z-index: 2000;
            border: 1px solid #aaa;
            overflow: auto;
            visibility: hidden;
            border-radius: 5px;
        }
    
    .ms-options-wrap.ms-active > .ms-options {
        visibility: visible
    }
    
    .ms-options-wrap > .ms-options > .ms-search input {
        width: 100%;
        padding: 4px 5px;
        border: none;
        border-bottom: 1px groove;
        outline: none;
    }
        .ms-options-wrap > .ms-options .ms-selectall {
            display: inline-block;
            font-size: 15px;
            /*! text-transform: lowercase; */
            /*! text-decoration: none; */
            color: yellow;
            /*! width: 100%; */
            /*! text-align: right; */
        }
    /*.ms-options-wrap > .ms-options .ms-selectall {
        display: inline-block;
        font-size: .9em;
        text-transform: lowercase;
        text-decoration: none;
    }*/
    .ms-options-wrap > .ms-options .ms-selectall:hover {
        text-decoration: underline;
    }
    
    .ms-options-wrap > .ms-options > .ms-selectall.global {
        margin: 4px 5px;
    }
    
    .ms-options-wrap > .ms-options > ul,
    .ms-options-wrap > .ms-options > ul > li.optgroup ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    
    .ms-options-wrap > .ms-options > ul li.ms-hidden {
        display: none;
    }
    
    .ms-options-wrap > .ms-options > ul > li.optgroup {
        padding: 5px;
    }
    .ms-options-wrap > .ms-options > ul > li.optgroup + li.optgroup {
        border-top: 1px solid #aaa;
    }
    
    .ms-options-wrap > .ms-options > ul > li.optgroup .label {
        display: block;
        padding: 5px 0 0 0;
        font-weight: bold;
    }
    
    .ms-options-wrap > .ms-options > ul label {
        ;
        display: inline-block;
        width: 100%;
        padding: 4px 4px 4px 20px;
        margin: 1px 0;
        border: 1px dotted transparent;
    }
    .ms-options-wrap > .ms-options.checkbox-autofit > ul label,
    .ms-options-wrap > .ms-options.hide-checkbox > ul label {
        padding: 4px;
    }
    
    .ms-options-wrap > .ms-options > ul label.focused,
    .ms-options-wrap > .ms-options > ul label:hover {
        background-color: #efefef;
        border-color: #999;
    }
    
    .ms-options-wrap > .ms-options > ul li.selected label {
        background-color: #efefef;
        border-color: transparent;
    }
    
    .ms-options-wrap > .ms-options > ul input[type="checkbox"] {
        margin: 0 5px 0 0;
        ;
        left: 4px;
        top: 7px;
    }
    
    .ms-options-wrap > .ms-options.hide-checkbox > ul input[type="checkbox"] {
         !important;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px 1px 1px 1px);
        clip: rect(1px, 1px, 1px, 1px);
    }
    

    Sunday, February 3, 2019 9:42 PM
  • User-1764593085 posted

    Hi polachan,

    If you do not want the checkbox and just show items as  dropdownlist,just set like below

    $('#dropdownDepot').multiselect({
                columns: 1,
                placeholder: 'Select Depot',
                includeSelectAllOption: true,
                maxHeight: 300,
                showCheckbox:false
            });

    Since you are using a third-party jquery multiselect plugin which is packed.I have read the doc and could not find the introduction to replace the checkbox as a radio style and I also suggest not.

    As radio button needs to use <input type="raido"> while checkbox uses type="checkbox", if you change it, other functions like select, selectAll would not work.

    Try to use CSS to add the custom style. Use the css after the calling of jquery.multiselect.css. Refer to

    https://stackoverflow.com/questions/25793716/how-to-change-style-of-radio-and-checkbox-input

    input[type=checkbox] {
        /* Hide original inputs */
        visibility: hidden;
        ;
    }
    
    .ms-options-wrap > .ms-options > ul label {
        height: 12px;
        width: 12px;
        margin-right: 2px;
        content: " ";
        display: inline-block;
        vertical-align: baseline;
        border: 1px solid #777;
        border-radius: 50%;
        padding: 4px;
    }
    
    .ms-options-wrap > .ms-options > ul label{
        background:gold
    }

    Xing

    Monday, February 4, 2019 8:09 AM
  • User-1355965324 posted

    Xing Many Thanks for the support

    Please can you advise me how can I use bootstrap checkbox with viewbag asp items. This is my original code

    <div class="controls col-sm-9">
    <select id="dropdownDepartment" class="form-control" asp-for="Department" asp-items="@ViewBag.UserDepartments" data-role="select"></select>

    </div>

    I want to replace with bootstrap checkbox like for the code given above. How can I use  asp-items="@ViewBag.UserDepartments" with the code given below, Please can you help

    <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
    <label class="custom-control-label" for="defaultUnchecked">Default unchecked</label>
    </div>

     

    Monday, February 4, 2019 9:49 AM
  • User-1764593085 posted

    Hi polachan,

    I recommend that you could use bootstrap-multiselect. Please see this post.

    I have created a simple demo below which you could refer to.

    <style>
        body {
            padding: 20px;
        }
    
        .multiselect-container div.checkbox {
            margin: 0;
        }
    
        .multiselect-container label {
            margin: 0;
            white-space: nowrap;
        }
    
        .multiselect-container div.checkbox {
            padding: 5px 15px 5px 35px;
        }
    
        .dropdown-toggle::after {
            display: none;
        }
    </style>
    
    <div class="custom-control custom-checkbox">
        <label for="teams">Choose a team:</label><br />
        <select id="teams" multiple="multiple" asp-items="@ViewBag.UserDepartments"></select>
    </div>
    
    
    
    @section Scripts{
        
      
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" rel="stylesheet" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>
    
        <script>
            $(document).ready(function () {
                $('#teams').multiselect({
                    templates: { // Use the Awesome Bootstrap Checkbox structure
                        li: '<li><div class="checkbox"><label></label></div></li>'
                    }
                });
                $('.multiselect-container div.checkbox').each(function (index) {
    
                    var id = 'multiselect-' + index,
                        $input = $(this).find('input');
    
                    // Associate the label and the input
                    $(this).find('label').attr('for', id);
                    $(this).find('label').attr('class', "custom-control-label");
                    $input.attr('id', id);
                    $input.attr('class', "custom-control-input");
    
                    // Remove the input from the label wrapper
                    $input.detach();
    
                    // Place the input back in before the label
                    $input.prependTo($(this));
    
                    $(this).click(function (e) {
                        // Prevents the click from bubbling up and hiding the dropdown
                        e.stopPropagation();
                    });
    
                });
            });
        </script>
    
    }

    Xing

    Monday, February 11, 2019 9:27 AM