web-dev-qa-db-ja.com

jquery setチェックボックスがチェックされている

私はすべての可能な方法を既に試みました、しかし私はまだそれを働かせませんでした。 checkboxを持つモーダルウィンドウがあります。モーダルが開いたら、checkboxのチェックまたはチェック解除はデータベースの値に基づいている必要があります。 （他のフォームフィールドとすでに連携していることを確認しています。）チェックしようとしましたが、うまくいきませんでした。

私のhtml div：

<div id="fModal" class="modal" >
    ...
    <div class="row-form">
        <div class="span12">
            <span class="top title">Estado</span>

          <input type="checkbox"  id="estado_cat" class="ibtn">
       </div>
    </div>             
</div>

そしてjquery：

$("#estado_cat").prop( "checked", true );

私はattrや、フォーラムでここで見た他の人たちも試しましたが、どれもうまくいかないようです。誰かが私を正しい方向に向けることができますか？

編集：[OK]を、私は本当にここに何かが欠けている...チェックボックスがページにある場合、私はコードを使用してチェック/チェック解除することができますが、モーダルウィンドウにある、私はできません。私は数十種類の方法を試してみました...

モーダルを開くためのリンクがあります。

そして、クリックを「聞いて」、テキストボックスにデータベースからのデータを入力するなどの操作を実行するためのjquery。すべてうまくいくように動作しますが、問題はコードを使用してチェックボックスをオン/オフに設定できないことです。助けてください！

$(function() {
 $(".editButton").click(function(){
       var id = $(this).data('id'); 
       $.ajax({
          type: "POST",
          url: "process.php",
          dataType:"json",
          data: { id: id, op: "edit" },
        }).done(function( data ) {
//the next two lines work fine, i.e., it grabs the value from database and fills the textboxes
          $("#nome_categoria").val( data['nome_categoria'] );
          $("#descricao_categoria").val( data['descricao_categoria'] );
//then I tried to set the checkbox checked (because its unchecked by default) and it does not work
           $("#estado_cat").prop("checked", true);
        $('#fModal').modal('show');
});
    evt.preventDefault();
    return false;
    });     
});
jquerycheckbox
387
psopa

あなたは 'prop'関数を使わなければなりません：

.prop('checked', true);

jQuery 1.6より前の場合 （ user2063626の回答 を参照）

.attr('checked','checked')
684
singe Batteur

提案されたすべての答えを取り、それらを私の状況に適用する - 取得された値true（ボックスをチェックする）またはfalse（ボックスをチェックしない）に基づいてチェックボックスをオンまたはオフにする - .prop（ "checked"、true） および .prop（ "checked"、false ）を使用することが正しい解決策であることがわかりました。

コメントや回答を追加することはまだできませんが、会話に追加するにはこれが十分に重要であると感じました。

これは、取得された値 "allDay"がtrueである場合に、ID "even_allday_yn"のチェックボックスをオンにすることを示す、フルカレンダーの変更を表す簡略コードです。

if (allDay)
{
    $( "#even_allday_yn").prop('checked', true);
}
else
{
    $( "#even_allday_yn").prop('checked', false);
}
67
eriknoyes

以下のコードを試してみてください。

$("div.row-form input[type='checkbox']").attr('checked','checked')

OR

$("div.row-form #estado_cat").attr("checked","checked");

OR

$("div.row-form #estado_cat").attr("checked",true);
50
user2063626

あなたはモーダルウィンドウにいるので（動的であろうとページ内であろうと）あなたはあなたの目標を達成するために次のコードを使うことができます。（私は私のサイトで同じ問題に遭遇しました。

HTML：

<div class="content-container" style="text-align: right;">
    <input type="checkbox" id="QueryGroupCopyQueries">
    <label for="QueryGroupCopyQueries">Create Copies</label>                                                   
</div>

コード：

$.each(queriesToAddToGroup, function (index, query) {
    if (query.groupAddType === queriesGroupAddType.COPY) {

        // USE FIND against your dynamic window and PROP to set the value
        // if you are using JQUERY 1.6 or higher.
        $(kendoWindow).find("input#QueryGroupCopyQueries").prop("checked", true);

        return;
    }

上記の "kendoWindow"が私のウィンドウです（私のものは動的ですが、ページ内の要素に直接追加する場合も同様です）。データの配列（ "queriesToAddToGroup"）をループ処理して、行にCOPYという属性があるかどうかを確認します。もしそうなら、私はユーザーがこのウィンドウから保存するときにその属性を設定するウィンドウ内のチェックボックスをオンにしたいです。

17
KeyOfJ

"checked"属性はチェックボックスが存在するとすぐにチェックを入れます。チェックボックスをチェック/チェック解除するには、属性を設定/設定解除する必要があります。

チェックボックスをオンにします。

$('#myCheckbox').attr('checked', 'checked');

チェックボックスをオフにします。

$('#myCheckbox').removeAttr('checked');

確認済みステータスをテストするには

if ($('#myCheckbox').is(':checked'))

それが役に立てば幸い...

16
shadock
.attr("checked",true)
.attr("checked",false)

trueとfalseが引用符で囲まれていないことを確認してください。

11
user1849310

あなたは以下の与えられたコードのように書くことができます。

_ html _ 

<input type="checkbox"  id="estado_cat" class="ibtn">

jQuery 

$(document).ready(function(){
    $(".ibtn").click(function(){
        $(".ibtn").attr("checked", "checked");
    });
});

それがあなたのために働くことを願っています。

5
Subir

私のために働きました：

$checkbok.prop({checked: true});
3
Sergio Pulgarin
$("#divParentClip").find("#subclip_checkbox")[0].checked=true;

検索は配列を返すので、項目が1つしかない場合でも取得するには[0]を使用します。

あなたがそれからfindを使わないのなら

$("#subclip_checkbox").checked=true;

これは私にとってはMozilla Firefoxではうまくいきました

3
Arvin

これはうまくいきます。

 $("div.row-form input[type='checkbox']").attr('checked','checked');
2
Chetan Patel

GreaseMonkeyスクリプトでこの機能を使用してページのチェックボックスを自動的にチェックする場合は、単にcheckedプロパティを設定しても関連付けられているアクションがトリガーされないことがあります。その場合、チェックボックスを「クリックする」ことでおそらく（そして同様にcheckedプロパティも設定するでしょう）。

$("#id").click()
2
lordcheeto

チェックボックスで$("#estado_cat").checkboxradio("refresh")を実行してみましたか？

2
J2N

これは、最新バージョンのjqueryのattr('checked')が'checked'を返すのに対し、prop('checked')はtrueを返すためです。

2
Rohan

あなたがおそらくjQuery UIを使っているのでこれを試してください（そうでなければコメントしてください）

 $("#fModal" ).dialog({
     open: function( event, ui ) {

     if(//some hidden value check which stores the DB value==expected value for
      checking the Checkbox)

         $("div.row-form input[type='checkbox']").attr('checked','checked');

    }
   });
2
user1428716

モーダルウィンドウを読み込んだ後にチェックボックスをオンにします。ページを読み込む前にチェックボックスを設定していると思います。

$('#fModal').modal('show');
$("#estado_cat").attr("checked","checked");
1
Vineeth Bhaskaran

私もこの問題に遭遇しました。

そしてここに私の古いが機能しないコードです

if(data.access == 'private'){
     Jbookaccess.removeProp("checked") ; 
    //I also have tried : Jbookaccess.removeAttr("checked") ;
 }else{
    Jbookaccess.prop("checked", true)
}

これが今動作している私の新しいコードです。

if(data.access == 'private'){
     Jbookaccess.prop("checked",false) ;
 }else{
    Jbookaccess.prop("checked", true)
}

そのため、キーポイントは機能する前です。checkedプロパティが存在し、削除されていないことを確認してください。

1
Eddy

私はこれがJqueryソリューションを要求することを知っていますが、私はプレーンJavaScriptでこれを切り替えることは非常に簡単であることを指摘したいのですが。

var element = document.getElementById("estado_cat");
element.checked = 1;

現在および将来のすべてのバージョンで動作します。

0
YungGun