Question

我在表单中使用复选框列表。我在复选框列表中有多个选项。选中其中一个选项后，应禁用其他选项，以便不允许用户选择其他选项。

我在事件处理程序中用c＃完成了但我不能再使用回发了我们怎样才能在javascript或jquery中执行此操作

    foreach (ListItem li in chk_mycheckbox.Items)
            {

                if ((!(li.Text.ToString().Contains("Unknown"))))
                {
                    li.Enabled = false;

                }

            }

Answer 1

你可能真的想要一组单选按钮。

e.g。

<li><input type="radio" name="gender" value="male">Male</li>
<li><input type="radio" name="gender" value="female">Female</li>

因为它只会强制执行一次选择。

但是，在当前场景中，您可以使用以下行循环选中复选框并禁用任何未选中的行。（这是使用jquery 1.6 +）

$('input[type=checkbox]').each(function () {
    if(!$(this).is(':checked')){
        //if not checked
        $(this).prop('disabled', true);
    }
});

继续发表评论。

给出应该禁用其他类别的复选框，例如“单项选择”。然后你的代码看起来像这样：

$(document).ready(function() {
    $('#formId input.single-selection').on('click', function (e) {
        var selectedCheckbox = $(this);
        if(selectedCheckbox.is(':checked')){
            $('#formId input[type=checkbox]').each(function () {
                if(selectedCheckbox[0] != $(this)[0]){
                    //if not selected checkbox
                    $(this).prop('disabled', true);
                    $(this).attr('checked', false);
                }
            });
        }else{
            $('#formId input[type=checkbox]').prop('disabled', false);
        }
    });
});

我没有测试过，但我相信这就是你需要的。只需用您正在使用的内容替换ID和类。

Answer 2

假设您希望在用户取消选择所选选项时启用其他选项，则可以尝试使用此代码。该代码假定您的表单的ID为“form1”

$('#form1 input').on('click',function(evt){
    var clickedEl = evt.target;
    if(clickedEl.checked){
        $('#form1 input').each(function(){
            $(this).attr('disabled',true);
        });
        $(clickedEl).attr('disabled',false);
    }
    else{
        $('#form1 input').each(function(){
            $(this).attr('disabled',false);
        });
    }
});

请注意，在jquery中，每个函数都允许您传递一个函数，该函数将在选择器匹配的每个元素上调用。

这是一个代码正常的jsfiddle：http://jsfiddle.net/vvt5g/

Answer 3

同意Andrew的答案，即单选按钮的功能。

无论如何，更进一步，您还需要控制用户是否取消选中该复选框。

给出一个复选框列表：

<input type='checkbox' >A
<input type='checkbox' >B
<input type='checkbox' >C
<input type='checkbox' >D

脚本部分可以像这样工作：

<script>
var checked = false; //will save current state of checkboxes

$('input:checkbox').click(function(){

  //if one was checked and then unchecked will enable all and return
  if(checked)
  {
    $('input:checkbox').each(function(){
       $(this).prop('disabled', false);
    });
    checked = false;
    return;
  }

  //if none was checked before, disable the rest
  $('input:checkbox').each(function(){
    if(!$(this).is(':checked')){
       $(this).prop('disabled', true);
    }
    else
       checked = true;
  });
});
</script>

FIDDLE

Answer 4

我为你创造了一个JsFiddle：

http://jsfiddle.net/jK4NE/

简而言之，我在每个checkBox上添加了一个类 myCheckBox ，并在Click上添加了以下jQuery代码：

$('.myCheckBox').click(function(){
    var currentId = $(this).attr('id');
    $('.myCheckBox').each(function(){
        if($(this).attr('id') != currentId){
            $(this).attr("checked", false);
        }
    });
});

如果您在特定ID下有复选框，则可以使用

来定位

#YourID输入：复选框

示例：

$('#YourID input:checkbox').click(function(){
    var currentId = $(this).attr('id');
    $('#YourID input:checkbox').each(function(){
        if($(this).attr('id') != currentId){
            $(this).attr("checked", false);
        }
    });
});

Answer 5

试试这个

<强> HTML：

<ul>
<li><input type="checkbox" name="gender" value="male">Male</li>
<li><input type="checkbox" name="gender" value="female">Female</li>
    </ul>

jQuery代码

$('input').change(function(){

    if( $(this).prop('checked') ){
        $(this).parent().parent().find('input').prop('disabled', true);
        $(this).prop('disabled', false);
    }

});

Demo

Answer 6

这是你的工作方式

$(document).ready(function () {
    var checked = false;
    $('#<%=lstExposureValue.ClientID%> input:checkbox').click(function () {
        var currentIdone = 'Unknown';
        var currentId = $(this).next().html();
        if (currentId == currentIdone) {

            if (checked) {

                $("#<%=lstExposureValue.ClientID%> input").removeAttr('disabled');
                checked = false;
                return;
            }
            else {
                $("#<%=lstExposureValue.ClientID%> input").attr('checked', false);
                $(this).attr('checked', true);
                $('#<%=lstExposureValue.ClientID%> input:not(:checked)').attr('disabled', 'disabled');
                checked = true;
            }


        }

    });
});

当使用Javascript选择其中一个时，如何禁用复选框列表中的其他项目

6 个答案: