设置值时复选框的视觉状态未更新

Posted 2023-05-06

【中文标题】设置值时复选框的视觉状态未更新

【英文标题】：Visual state of checkbox is not updating while value is set

【发布时间】：2018-05-12 01:38:08

【问题描述】：

我在下面的代码中有以下问题：

https://jsfiddle.net/ftnLv0pm/

我在 android 应用程序中的 cordova.js 上运行小部件，但我遇到了一个问题，即 view-standard-card-is-active-checkbox 的视觉状态没有在小部件中更新，而它的数据在它在 web 上工作时更新（我已经检查了几次）。 有没有办法强制更新开关的视觉状态？或者我的代码可能有错误。

var cardEnabledCheckboxInput = $('#view-standard-card-is-active-checkbox');
var cardEnabledCheckbox = $('#view-standard-card-is-active-label');

if (currentCardData) 
            // This does not updates visual state, while has true inside
            cardEnabledCheckboxInput.prop('checked', currentCardData.enabled);

            // default card switch needs to be hidden if the card is disabled.
            if (!currentCardData.enabled) 
                hideDefaultCardSwitch();
            
        

该代码对视觉状态没有影响。

var currentCardData 是包含卡片数据的 json。

【问题讨论】：

多一点你的代码不会有什么坏处

@yark1y currentCardData 是什么？ @AndroidSmoker74 哈哈

@plonknimbuzz 我在我的帖子中解释了一点。 currentCardData.enabled 在当前实现中始终为真。所以和我那里写的是一样的，而且if (currentCardData) 一直被访问，我可以保证。

【参考方案1】：

看来您只是在更新数据。您还必须更新数据更改的视图。 如果您从另一个类执行此操作，请确保您在 UI 线程上运行此命令。

【讨论】：

我能读到什么吗？我只是有点困惑，认为如果选中复选框，用户界面必须自行更新。

【参考方案2】：

$('#view-standard-card-is-active-checkbox').prop('checked', true);

$(document).ready(function() 
    //set initial state.
    $('#view-standard-card-is-active-checkbox').val($(this).is(':checked'));

    $('#view-standard-card-is-active-checkbox').change(function() 
        $('#view-standard-card-is-active-checkbox').val($(this).is(':checked'));
    );

    $('#view-standard-card-is-active-checkbox').click(function() 
        if (!$(this).is(':checked')) 
            return confirm("Are you sure?");
        else
        	return confirm("checked");
        
    );
);

.view-standard-card-is-active-label 
    margin-top: 2%;
    float: right;
    position: relative;
    display: block;
    height: 10px;
    width: 50px;
    right: 6.9%;
    background: #d5d5d5;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s ease;


.view-standard-card-is-active-label:after 
    margin-top: 2%;
    position: relative;
    left: -2px;
    top: -12px;
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 100px;
    background: #777777;
    box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
    content: '';
    transition: all 0.3s ease;


.view-standard-card-is-active-label:active:after  transform: scale(1.15, 0.85); 

#view-standard-card-is-active-checkbox:checked ~ .view-standard-card-is-active-label 
    background: #d5d5d5;


#view-standard-card-is-active-checkbox:checked ~ .view-standard-card-is-active-label:after 
    left: 20px;
    background: #ff0000;


#view-standard-card-is-active-checkbox:disabled ~ .view-standard-card-is-active-label 
    background: #F6F6F6;
    pointer-events: none;


#view-standard-card-is-active-checkbox:disabled ~ .view-standard-card-is-active-label:after  background: #bcbdbc; 

<input id="view-standard-card-is-active-checkbox" type="checkbox" class="checkbox hidden"/>
<label for="view-standard-card-is-active-checkbox" id="view-standard-card-is-active-label" class="view-standard-card-is-active-label"></label>