Материализовать промежуточное состояние флажка

Question

Как я могу установить флажок, чтобы показывать как «неопределенный» при снятии флажка в Materialize?

HTML:

<input type="checkbox" id="test" checked/> 
<label for="test" id="test-label">Red</label> 

JS:

$('#test-label').click(function() { 
    var checkbox = $(this).prev(); 
    if (!$(checkbox).is(':checked')) 
     $(checkbox).prop('indeterminate', true); 
}); 

https://jsfiddle.net/Lhwkfb75/8/

Answer 1

Это должно быть indeterminate вместо intermediate. Вероятно, вы сбились с толку из-за их похожих написаний.

$('#test').click(function() { 
    if (!$(this).is(':checked')) 
     $(this).prop('indeterminate', true); 
}); 

Answer 2

Две вещи важны для достижения этой цели:

1. Предотвратить по умолчанию обработчик
2. При установке неопределенном состоянии, вы также должны отключить проверенное состояние, в противном случае, хотя флажок появляется в качестве промежуточного , $(chk).prop('checked') по-прежнему будет true.

Здравствуйте

$('#check-label').click(function(e) { 
    e.preventDefault(); 

    var chk = $("#test"); 

    if ($(chk).prop("checked")) { 
     $(chk).prop("indeterminate" , true); 
     $(chk).prop("checked" , false); 
    } else { 
     $(chk).prop("checked" , true); 
     $(chk).prop("indeterminate" , false); 
    } 

}); 

или даже более элегантна:

$('#check-label').click(function(e) { 
    e.preventDefault(); 

    var chk = $("#test"); 

    $(chk).prop("checked", !$(chk).prop("checked")); 
    $(chk).prop("indeterminate", !$(chk).prop("checked")); 

}); 

См working fiddle.