18

マテリアル デザイン ライト チェックボックスを使用しており、JavaScript を使用して要素をチェックまたはチェック解除しようとしています。私はこれを試しました：

document.getElementById("checkbox-1").checked = true;

それは機能しません。私はjQueryで同じアプローチを試みました：

$("#checkbox-1").prop('checked',true);

それもうまくいきませんでした。どんな助けでも大歓迎です。

4

8 に答える 8

16

現在、1.0.0 のこのコンポーネントには、ウィジェットとして公開されないというバグがあります。これは修正されました。現在マスターで、数日以内に 1.0.1 パッチで、安定したビルドで誰でも利用できるようになります。

これは、パッチが適用されたバージョンを使用している場合に機能する適切な処理方法です。

要素を確認するには: document.querySelector('.mdl-js-checkbox').MaterialCheckbox.check()

チェックを外すには： document.querySelector('.mdl-js-checkbox').MaterialCheckbox.uncheck()

現在、完全な API は、ソース コードを見て、アンダースコアで終わらないプロパティを表示することで発見できます。アンダースコアで終わる場合、それらは内部使用のみであり、外部使用はサポートされていません。

JS API の文書化に取り組んでいますが、完了してサイトに展開するには、もう少し時間がかかります。

于 2015-07-15T01:09:37.680 に答える
8

<input type="checkbox">element と parentに id または class さえ持っている私たち (すべての人) にとって<label>、秘訣は親で MDL メソッドを実行することです。そうしないと、.MaterialCheckbox is undefinedエラーが発生します。

.parentElement.MaterialCheckbox.check();
.parentElement.MaterialCheckbox.uncheck();

たとえば、次のようになります。

var myCheckbox = document.getElementById('my-checkbox');
myCheckbox.parentElement.MaterialCheckbox.check();
于 2017-02-01T01:44:45.580 に答える
3

jQuery を使用している場合:

$('.mdl-js-checkbox').each(function (index, element) { 
    element.MaterialCheckbox.check();
})
于 2016-03-28T14:50:22.550 に答える
1

申し訳ありませんが、v1.2.1 の時点では、上記の解決策はどれもうまくいきませんでした

これは私がやったことであり、私にとってはうまくいっています。

$(".mdl-checkbox").on("change", function() {
  if ($(this).hasClass("is-checked")) {
    return $(this).children().first().attr("checked", true);
  } else {
    return $(this).children().first().removeAttr("checked");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

それが役に立てば幸い。

于 2016-09-27T11:22:17.870 に答える
0

親 <label> タグでクラス「is-checked」を単純に再設定する、すてきな小さな解決策を見つけました。

var te = $('#some-checkbox').prop("checked", false).parent();
te.removeClass('is-checked');

もちろん、コードをスイートに設定してリファクタリングするための .addClass() 。

于 2016-02-29T16:46:02.407 に答える