Question

我有一个带有两个字段的表单，一个是单选按钮，第二个是复选框。我想在单选按钮值为No时取消选中复选框（如果选中）和readonly。我的代码用于未经检查的功能但readonly不起作用。请帮助我

这是我的代码：

Html：

<input type="radio" name="data[User][email_status]" id="" value="yes">Yes&nbsp;&nbsp;
<input type="radio" name="data[User][email_status]" id="" value="no" checked="checked">No 
<input type="checkbox" name="data[User][no_alerts]" id="" value="yes">

Jquery代码：

$(document).ready(function() {
    $('input[name="data[User][email_status]"]').change (function(){
        //console.log($(this).val());
        if ($(this).val() == 'no')  {
            $('input[name="data[User][no_alerts]"]').attr({
                'checked' : false,
            });
        }
    });  
});

由于

Answer 1

使用disabled属性使输入只读

  $('input[value="no"]:checked').next().prop("disabled", true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="data[User][email_status]" id="" value="yes">Yes&nbsp;&nbsp;
<input type="radio" name="data[User][email_status]" id="" value="no" checked="checked">No
<input type="checkbox" name="data[User][no_alerts]" id="" value="yes">

或更通用的方法

 $('input[value="no"]:checked').parent().find('input[type="checkbox"]').prop("disabled", true);

Answer 2

您可以禁用该复选框。禁用复选框是只读的。

$("input[name="data[User][no_alerts]"]").attr("disabled", true);

要禁用它

Answer 3

您可能会喜欢以下代码段：

$(function() {
  var chk = $('input[name="data[User][no_alerts]"]');//got check-box
  $('input[name="data[User][email_status]"]').on('change', function(e) {
    chk.prop('disabled', false); //enable first
    if ('no' == this.value) {
      chk.prop({
        'disabled': true,
        'checked': false
      });
    }
  });
  $('input[name="data[User][email_status]"]:checked').trigger('change');//fire code on page load
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="data[User][email_status]" id="" value="yes">Yes&nbsp;&nbsp;
<input type="radio" name="data[User][email_status]" id="" value="no" checked="checked">No
<input type="checkbox" name="data[User][no_alerts]" id="" value="yes">

Answer 4

也可以使用

 $('input[name="data[User][email_status]"]').change (function(){
            //console.log($(this).val());
            if ($(this).val() == 'no')  {
                $('input[name="data[User][no_alerts]"]').attr({
                    'checked' : false,
                    'disabled':"disabled",
                });
            }
        });

如何使复选框只读

5 个答案: