Question

所以我有一些PHP代码正在吐出阿凡达的复选框。然而，该人只能选择他们的图库中的一个图像作为他们的化身。但是，当他们检查其中一个框时，我希望能够禁用所有其他框。我似乎无法解决这个问题。试过很多不同的事情所以我想我会问特定的代码。

echo 'Avatar: <input type="checkbox" name="membersview[]" class="memberavatar" value="'.$galleryid.'" /><br />';

所以我想要的是如果用户检查任何具有成员头像类的复选框。我想禁用具有membersavatar类的其他复选框。

一些示例HTML输出，以便您可以看到浏览器如何重新插入它

<form action="/members/members_gallery.php" method="post" id="memberdetail">
<div style="width:150px; height:200px; float:left; margin:0; padding:0; border:0;">
    <a href="../site/images/gallery/users/ninja@theringersclan.com/1390202957-20130816_193346.jpg" target="_blank">
        <img src="../site/images/gallery/users/ninja@theringersclan.com/1390202957-20130816_193346.jpg" style="width:150px; height:150px; margin:0; border:0; padding:0;">
    </a> 
    <br>Is Public: <input type="checkbox" name="galleryid[]" value="5">
    <br>Members: <input type="checkbox" name="membersview[]" value="5" checked="checked">
    <br>Avatar: <input type="checkbox" name="membersview[]" class="memberavatar" value="5">
    <br>Delete: <input type="checkbox" name="deletepic[]" value="5">
    <br>
</div>
<div style="width:150px; height:200px; float:left; margin:0; padding:0; border:0;">
    <a href="../site/images/gallery/users/ninja@theringersclan.com/1390203939-240_screenshots_2014-01-19_00001.jpg" target="_blank">
        <img src="../site/images/gallery/users/ninja@theringersclan.com/1390203939-240_screenshots_2014-01-19_00001.jpg" style="width:150px; height:150px; margin:0; border:0; padding:0;">
    </a>
    <br>Is Public: <input type="checkbox" name="galleryid[]" value="7" checked="checked">
    <br>Members: <input type="checkbox" name="membersview[]" value="7" checked="checked">
    <br>Avatar: <input type="checkbox" name="membersview[]" class="memberavatar" value="7">
    <br>Delete: <input type="checkbox" name="deletepic[]" value="7"><br></div><div class="cl">
</div>
<br><br>
<input type="submit" name="galleryupdatepics" value="Update Pics" style="float:left">

Answer 1

像这样 -

$function(){
    $('.memberavatar').click(function(){
          $('.memberavatar').not(this).each(function(){
              $(this).prop("disabled", true);
          });
    });
});

JSFiddle示例 - http://jsfiddle.net/wzNdL/

<强>更新
要模仿一个无线电组，但只有在第一个'未经检查'之后，尝试这样的事情 -

$(function(){
    $('.memberavatar').click(function(){
        if($(this).is(':checked')){
              $('.memberavatar').not(this).each(function(){
                  $(this).prop("disabled", true);
              });
        }
        else {
              $('.memberavatar').prop("disabled", false);
        }
    });
});

JSFiddle - http://jsfiddle.net/wzNdL/4/

Answer 2

有些事情：

$('.memberavatar').click(function(event) {
    $('.memberavatar').prop('disabled', true);
    $(event.target).prop('checked',true);
});

小提琴：http://jsfiddle.net/5K8L6/

当然在这种情况下，使用单选按钮而不是复选框

会更有意义

Answer 3

这将非常好用。

<强>代码：

$("input:checkbox.memberavatar").click(function () {
    $(':checkbox').not($(this)).attr('checked', false);
});

JSFiddle：http://jsfiddle.net/gqPmw/2/

Answer 4

你可以这样做：

$(function(){
    $('.memberavatar').click(function(){
    $('.memberavatar').not(this).each(function(){
    $(this).attr('checked', false);
    });

});

但是你被告知最好不要使用单选按钮。上面的函数只是将某些类的复选框代表单选按钮。

一旦选中一个类，jQuery禁用复选框

4 个答案: