使字段只读 - 复选框 - jQuery

Question

我有一个复选框：

<input type="checkbox" name="suspended" id="s" value="<?php echo $udata['suspended']; ?>" <?php echo $suspended; ?>>

And this textarea:

<textarea name="suspendreason" id="sr" style="height:60px" class="field"><?php echo $udata['suspendreason']; ?></textarea>

我的问题是，当 #s 复选框未被选中时，如何使文本区域变为只读？

- Oliver 'Oli' Jensen

Answer 1

根据您的要求，可以这样实现：

$(document).ready(function(){
    if($('#s:checked').length){
        $('#sr').attr('readonly',true); // On Load, should it be read only?
    }

    $('#s').change(function(){
        if($('#s:checked').length){
            $('#sr').attr('readonly',true); //If checked - Read only
        }else{
            $('#sr').attr('readonly',false);//Not Checked - Normal
        }
    });
});

- cillierscharl

---

当复选框未被选中时，该字段仍然被禁用。 - Oliver 'Oli' Jensen

由于我的环境使用了noConflict()，所以我把$改成了$j。- 已更新 - cillierscharl

谢谢！没有使用 $j 也能正常工作。 - Oliver 'Oli' Jensen

Answer 2

我建议将其设置为只读且禁用。

$("#sr").attr('disabled', 'disabled');
$("#sr").attr('readonly', 'readonly');

之所以要这样做，是因为如果有人处于“插入符浏览”模式（虽然罕见，但我确实有客户这样做过），他们可以编辑禁用的字段。

至于复选框：

<script type="text/javascript">
    $(document).ready(function () {
        // check upon loading
        if(!$("#s").is(:checked))
        {
           $("#sr").attr('disabled', 'disabled');
           $("#sr").attr('readonly', 'readonly');
        }

        // event
        $("#s").change(function () {
           if(!$(this).is(:checked)) {
           {
              $("#sr").attr('disabled', 'disabled');
              $("#sr").attr('readonly', 'readonly');
           }
           else
           {
              $("#sr").attr('disabled', '');
              $("#sr").attr('readonly', '');
           }
         }
      });
</script>

- Karyna Kerin

---

这个不起作用。当复选框被选中和取消选中时，该字段是可读的。 - Oliver 'Oli' Jensen

可读或可编辑？如果您不希望他们能够阅读它，您将希望它不可见。禁用/只读仅更改是否可以编辑它的事实。 - Karyna Kerin

我更新了我的回答，应该是 .change 而不是 .click，抱歉。 - Karyna Kerin

(:checked) 应该使用引号 (':checked')。 - Jon

Answer 3

$(document).ready(function() {
    $("#s").change(function() {
        if (!this.checked) {
            $("#sr").attr('disabled', 'disabled');
            $("#sr").attr('readonly', 'true');
        }
        else {
            $("#sr").removeAttr('disabled');
            $("#sr").removeAttr('readonly');
        }
    });

    //triger change event in case checkbox checked when user accessed page
    $("#s").trigger("change")
});

工作演示 - http://jsfiddle.net/cc5T3/1/

- ipr101

---

演示不起作用。当复选框未被选中时，它仍然被禁用。当我在我的网站上尝试时，当复选框被选中并且用户访问页面时，它没有被禁用。然后我取消选中它，它变成了只读模式。 - Oliver 'Oli' Jensen

抱歉，代码和演示现在应该都可以正常工作了。 - ipr101

Answer 4

$("input[type=checkbox][checked]").each( 
    function() { 
      $("#sr").attr("disabled", "disabled")
    } 
);

- Jorge Zapata

Answer 5

你可以设置为 disabled = "disabled"

- simoncereska

---

是的。但是那个jQuery代码会是什么样子呢？如果用户加载页面时，复选框已经被选中（从数据库中获取的值），那么该字段应该变为只读。但是，如果它还没有被选中，并且用户选中了它，它应该变为只读。 - Oliver 'Oli' Jensen

这只是保持复选框禁用。 - Oliver 'Oli' Jensen