web-dev-qa-db-ja.com

マテリアルデザインライトチェックボックスを切り替え

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

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

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

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

それもうまくいきませんでした。任意の助けいただければ幸いです。

javascriptmaterial-design-lite
16
Agustín Villalobos

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

これは、パッチを当てたバージョンがある場合に機能する適切な方法です。

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

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

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

JS APIの文書化に取り組んでいますが、完了してサイトにロールアウトするまでに少し時間がかかります。

13
Garbee

<input type="checkbox">要素と親<label>にIDまたはクラスさえ持っている私たち（全員）にとって、トリックは親でMDLメソッドを実行することです。そうしないと、.MaterialCheckbox is undefinedエラーが発生します。

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

したがって、たとえば：

var myCheckbox = document.getElementById('my-checkbox');
myCheckbox.parentElement.MaterialCheckbox.check();
8
Ronnie Royston

JQueryを使用している場合：

$('.mdl-js-checkbox').each(function (index, element) { 
    element.MaterialCheckbox.check();
})
2
krisanalfa

MDL JS APIにアクセスせずにこれを行う最善の方法は、<input type='checkbox'>チェックされている場合：

if ($('#mycheckbox')[0].checked) {                                      
    $('#mycheckbox').trigger('click');
}

私の使用例では、両方を設定することはできませんが、どちらも設定することはできない2つのチェックボックスを使用して、以下を使用しました。

$(function() {
    $(document).on('change', '#mycheckbox1', function() {
        if(this.checked && $('#mycheckbox2')[0].checked) {
            $('#mycheckbox2').trigger('click');
        }
    });
    $(document).on('change', '#mycheckbox2', function() {
        if(this.checked && $('#mycheckbox1')[0].checked) {
            $('#mycheckbox1').trigger('click');
        }
    });
});
2
Chris Wheeler

申し訳ありませんが、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>

それが役に立てば幸い。

1
biojazzard

親の<label>タグでクラスを「is-checked」に再設定するだけの素敵な小さなソリューションが見つかりました.

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

.addClass（）を使用して、コードをもちろんスイートに設定およびリファクタリングします。

0
Mike

これを変更するだけです：

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

これに：

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

うまくいきました（マテリアルデザイン1.0.4を使用）

0
MrPotato

UPDATE：次の答えは悪い習慣です（プロジェクトのメンテナの1人による）と解決策is 提供 パッチバージョン1.0.1の場合ここでは、今後の参考のために答えを残しておきます。

次の解決策は、DOM要素をMDLコンポーネントに手動でアップグレードする場合にのみ推奨されます（つまり、var myCheckBox = new MaterialCheckbox(el);）。

私が思いついた最も簡単な方法は、（DOM elemntではなく）実際のMDLコンポーネントにアクセスすることでした**。したがって、HTMLが the following の場合：

<label class="my-checkbox" for="checkbox-1">
  <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked />
  <span class="mdl-checkbox__label">Checkbox</span>
</label>

それからあなたはこのようなものを持っているでしょう：

var domEl = document.getElementById("my-checkbox")
var mdlComp = new MaterialCheckbox(domEl)

// now you can just use the functions provided by the MDL component
mdlComp.uncheck();

MaterialCheckbox が提供するその他のメソッドは、check、disable、およびenableです。

** MDLの動作に関する記事を書きました ここ

0
Yan Foto