JQuery chức năng .prop không làm việc để bỏ chọn hộp

Question

tôi đã cố gắng rất nhiều các ý tưởng tôi thấy đây để bỏ chọn hộp kiểm khi một hộp kiểm khác nhau được kiểm tra, nhưng không ai đang làm việc ...

phải tôi bây giờ tôi có:

$("#chkBox1").click(function() { 
if ($(this).is(":checked")) { 
    $('#chkBox2').prop('checked', false); } 
}); 

..nhưng không có kết quả, chkBox2 vẫn kiểm tra

đây là một hộp kiểm trong HTML:

<input type="checkbox" name="art" id="chkBox1" data-mini="true" data-theme="c" /> 

một sự khác biệt có thể có trong mã của tôi là các hộp kiểm chỉ được thêm vào trang khi một nút được nhấp, sử dụng href ... các hộp kiểm nằm trong HTML (không được tạo trong Javascript) .. nhưng không hiển thị cho đến khi nút đã nhấp vào .. có thể đây là một phần của sự cố không? Hay tôi còn thiếu cái gì khác? Ngoài ra, tôi đang sử dụng JQuery Mobile.

Answer 1

Bạn cần phải làm mới nó sau khi thay đổi của nó .prop, sử dụng .checkboxradio('refresh').

Demo

// Check #chkBox2 by default 
$('#chkBox2').prop('checked', true).checkboxradio('refresh') 

// Uncheck #chkBox2 when #chkBox1 is checked 
$('#chkBox1').on('click', function() { 
if ($(this).is(':checked')) { 
    $('#chkBox2').prop('checked', false).checkboxradio('refresh'); 
} 
}); 

• jQuery Mobile API reference

Answer 2

Bạn đang kiểm tra this, và thay đổi chkBox2:

if ($(this).is(":checked")) { 
    $('#chkBox2').prop('checked', false); } 

Hãy thử điều này thay vì:

if ($('#chkBox2').is(":checked")) { 
    $('#chkBox2').prop('checked', false); } 

Hoặc đơn giản là:

$('#chkBox2').prop('checked', false); 

Answer 3

xin lỗi, tôi phải tiếp tục đọc!

này dường như làm các trick:

$('#chkBox1').checkboxradio('refresh'); 

..nhưng tôi không chắc chắn chính xác lý do tại sao, là một cái gì đó độc đáo này để JQuery di động?

Answer 4

Html

<input type="checkbox" name="art" id="chkBox1" data-mini="true" data-theme="c" /> 
<input type="checkbox" name="art2" id="chkBox2" data-mini="true" data-theme="c" checked="checked" /> 

jQuery:

(function ($) { 
$(document).ready(function() { 
    $("#chkBox1").click(function() { 
     if ($(this).is(":checked")) { 
      $('#chkBox2').prop('checked', false); 
     } 
    }); 
}); 
})(jQuery); 

dụ làm việc ở đây http://jsfiddle.net/SwmN6/75/

Answer 5

Không áp dụng đối với jQuery Mobile (bỏ lỡ comment OP về điện thoại di động), chỉ cần chuẩn jQuery.

Đặt một kiểm tra trong hộp kiểm 2 nếu hộp kiểm 1 là không được kiểm soát và hộp 2 cũng được đánh dấu

Nếu không nếu hộp kiểm 1 sẽ được kiểm tra và hộp 2 được chọn, hộp 2 được đánh dấu

Checkbox 2 không có chức năng về kiểm tra/bỏ chọn hộp kiểm với 1.

Làm việc Ví dụ: http://jsfiddle.net/tuxzn/

công trình trong chrome, FF, IE10

<ol> 
    <li> 
     <input name="check[1]" type="checkbox" checked="checked" value="1" /> 
    </li> 
    <li> 
     <input name="check[2]" type="checkbox" value="1" /> 
    </li> 
</ol> 

Verbose Phương pháp

(function($){ 
    $(document).ready(function(){ 
     $('input[name="check[1]"]').change(function(e){ 
      if($(this).is(':checked')){ 
       $('input[name="check[2]"]').prop('checked', false); 
      }else{ 
       $('input[name="check[2]"]').prop('checked', true); 
      } 
     }); 
    }); 
})(jQuery); 

ngắn Phương pháp(với điện thoại di động) http://jsfiddle.net/Ag9Cn/

 $('input[name="check[1]"]').change(function(e){ 
      $('input[name="check[2]"]').prop('checked', !!!$(this).is(':checked')) 
      .checkboxradio('refresh'); //mobile support 
     });