2016-11-08 57 views
0

我有一個窗體與兩個字段之一是單選按鈕,第二個是複選框。我想讓複選框取消選中(如果選中)和只讀當單選按鈕值。我的代碼正在爲選中的功能,但只讀不work.Please幫我如何使複選框只讀

這是我的代碼:

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, 
      }); 
     } 
    }); 
}); 

感謝

+0

嘗試禁用的複選框 – Steve

+0

示例:$('輸入[類= 「busiProp」]:否(:選中)禁用」,真); ')ATTR('。 – Bugfixer

+0

注意:使一個輸入元素'disabled'不會將其與表單一起提交。因此,一個'checked'複選框也被禁用,就好像它沒有被選中一樣。對於這個問題(鑑於描述),這是很好的,但對於一般情況來說並不合適。 –

回答

0

您可以禁用該複選框。禁用的複選框是隻讀的。

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

要禁用它

1
$('input[name="data[User][no_alerts]"]').attr({ 
       'disabled' : true, 
      }); 
+0

非常感謝,這是工作對我來說 –

+0

使用jQuery而不是HTML來使輸入被禁用有什麼好處?爲什麼不使用'' – Trix

1

使用禁用的屬性,以使輸入只讀

$('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); 
+0

複選框不一定放在(因此'.next()')'input [value =「no」]'之後。您可能想在您的回答中考慮一定程度的普遍性 – Trix

+0

@Trix我不想:) – madalinivascu

0

您可能喜歡這個代碼段:

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

+0

當答案爲YES時,複選框不是隻讀 – Trix

+1

@Trix,根據OP,複選框需要只讀答案是**否**。現在,如果用戶想要將他/她的選項從**否**更改爲**是**,該怎麼辦? – Arvind

+0

你是對的。 – Trix

0

此也可以使用

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