使字段只读 - 复选框 - jQuery答案

【问题标题】：Make field readonly - checkbox - jQuery使字段只读 - 复选框 - jQuery
【发布时间】：2011-11-17 04:14:21
【问题描述】：

我有这个复选框：

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

还有这个文本区域：

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

我的问题是，当#s 复选框未选中时，我怎样才能使 textarea 只读？

【问题讨论】：

标签： jquery html checkbox

【解决方案1】：

你可以让它禁用=“禁用”

【讨论】：

是的。但是那个 jQuery 代码会是什么样子呢？如果用户加载页面，并且复选框已被选中（来自 DB 的值），则该字段应该是只读的。但是，如果它还没有被检查，并且用户检查了它，它应该变成只读的。
这只是保持复选框禁用。

【解决方案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>

【讨论】：

这不起作用。当复选框被选中和取消选中时，该字段是可读的。
可读或可编辑？如果您不希望他们能够阅读它，您会希望它不可见。 disabled/readonly 只会改变是否能够编辑它的事实。
我更新了答案，应该是 .change 而不是 .click，对不起。
(:checked) 应该使用引号 (':checked')

【解决方案3】：

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

【讨论】：

【解决方案4】：

根据您的要求，如下所示：

$(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
        }
    });
});

【讨论】：

当复选框未选中时，字段仍处于禁用状态
有一个 $j 而不是 $ 由于我的环境没有冲突;) - 更新
谢谢！在没有 $j 的情况下工作

【解决方案5】：

$(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/

【讨论】：

演示不工作。当复选框未选中时，它仍然被禁用。当我在我的网站上尝试它时，当复选框被选中并且用户访问该页面时；它没有被禁用。然后我取消选中它，它变成了只读的。
抱歉，代码和演示现在都应该可以工作了。