dimanche 16 juillet 2023

JS Change style attributes in databable-checkbox

I use datatable to display data send by JSON. true/false information is displayed by checkbox using the render function:

'render': function(data, type, full, meta) {
    
    var checkbox = $("<input/>", {"type": "checkbox" }, {"color": "red"} );
    
    if (data == "1") {
        checkbox.attr("checked", "checked");
        // checkbox.addClass("checkbox_checked");
                                
    } else {
        checkbox.removeAttr("checked");
        // checkbox.addClass("checkbox_unchecked");                         
    }
    
    return checkbox.prop("outerHTML")

}

So, due to only display the data and not change, I set attr to disabled. Doing so, the checkbox is greyed out, and not very visible. So I'm looking for an solution to change the color of the checkbox to red/green for more visibility.

But I cant find a solution to change the style attributes. If I remove the 'disabled' attr the checkbox is displayed with blue background and white hook. But now, the user is able to change it.

Please provide a hint for the best solution

  • overwrite the style (color) for disabled checkboxes
  • other idea to display the checkbox more significant



Aucun commentaire:

Enregistrer un commentaire