Question

我在页面上使用了两个复选框（test1和test2），我想编写一个JavaScript代码，如果选中另一个，则禁用一个。它工作正常。但是当盒子只读时，我需要text灰色。

这是我的代码

 <div class="auto_pick">
                <input name="ch0" type="checkbox" value="" id="ch0" align="left" onclick="if (this.checked) document.getElementById('ch1').disabled=true; else document.getElementById('ch1').disabled = false;" style="float:left; margin-right:5px;" />
                Test1</div>
              <div class="auto_pick1">
                <input name="ch1" type="checkbox" value="" id="ch1" align="left" onclick="if (this.checked) document.getElementById('ch0').disabled=true; else document.getElementById('ch0').disabled = false;"  style="float:left; margin-right:5px;" />
                Test2</div>

Answer 1

您可以在文本中使用span类。

<div class="auto_pick">
                <input name="ch0" type="checkbox" value="" id="ch0" align="left"  />
                Test1</div>
              <div class="auto_pick1">
                <input name="ch1" type="checkbox" value="" id="ch1" align="left" />
                  <span id="text">Test2 </span></div>

Jquery代码

$(function(){
  $("#ch0").click ( function() {

    if ( $(this).is ( ":checked" ) )
    {
      $("#ch1").attr ( "disabled" , true);
        $("#text").css("color","grey");
    }
    else
    {
      $("#ch1").removeAttr ( "disabled" ,true);
      $("#text").css("color","black");
    }
  });
});

Answer 2

你用jquery标记了问题，我没有看到任何jquery代码，无论如何我用jquery为你创建了小提琴：http://jsfiddle.net/Fq32Q/

我认为你应该css而不是内联样式，并使用内联javascript函数。

HTML：

<div id="checkboxes">
    <label><input type="checkbox" id="ch0" /> Test1 </label>
    <label><input type="checkbox" id="ch1" /> Test2 </label>
</div>

CSS：

#checkboxes label { float:left; margin-right:5px; }
#checkboxes label.disabled { color:#ccc; }

使用Javascript：

$(function() {
    $("#checkboxes input").click(checkCheckboxes);
});

function checkCheckboxes() {
    var checked = this.checked;
    if(checked) {
        $("#checkboxes input").not(":checked").attr('disabled', 'disabled')
            .parent().addClass('disabled');
    } else {
        $("#checkboxes input").removeAttr('disabled').parent().removeClass('disabled');
    }
}

Answer 3

<div class="auto_pick">
                <input name="ch0" type="checkbox" value="" id="ch0" align="left" onclick="myfun(this.checked);" style="float:left; margin-right:5px;" />
                <label id="txt1">Test1</label></div>
              <div class="auto_pick1">
                <input name="ch1" type="checkbox" value="" id="ch1" align="left" onclick="myfun(this.checked);"  style="float:left; margin-right:5px;" />
                <label id="txt2">Test2</label></div>

<script language="JavaScript">
function myfun(checked)
{

    if (checked)
    {
        document.getElementById('ch0').disabled=true;
        document.getElementById("txt1").style.color="grey";
        document.getElementById("txt2").style.color="black";
    }
    else
    {
        document.getElementById('ch0').disabled = false;
        document.getElementById("txt2").style.color="grey";
        document.getElementById("txt1").style.color="black";
    }
}

Answer 4

你可以这样做：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>

    <style type="text/css">
        .disabled {
            color:#999;
        }
    </style>

    <script type="text/javascript">
        function check(chk, id){
            var chk1 = document.getElementById(id);
            if(chk.checked){
                chk1.disabled = true;
                chk1.parentNode.className = "disabled";
            }
            else {
                chk1.disabled = false;
                chk1.parentNode.className = "";
            }

        }
    </script>

</head>
<body>
     <div class="auto_pick">
            <input name="ch0" type="checkbox" value="" id="ch0" align="left" onclick="check(this, 'ch1');" style="float:left; margin-right:5px;" />
            Test1</div>
          <div class="auto_pick1">
            <input name="ch1" type="checkbox" value="" id="ch1" align="left" onclick="check(this, 'ch0');"  style="float:left; margin-right:5px;" />
            Test2</div>
</body>
</html>

禁用复选框中的错误

4 个答案: