单击按钮时启用和禁用收音机按钮

Enabling and Disabling Radio buttons on button clicks

本文关键字：按钮 收音机 启用 单击      更新时间：2023-09-26

我有两个单选按钮，即

Popular
Others

两个按钮

Edit 
Cancel

最初，当我点击编辑按钮时，单选按钮将被禁用。单选按钮应被启用，当我再次点击取消按钮时，应被禁用。。

目前我只能在点击编辑按钮时启用，但在点击取消按钮时无法禁用。有人能帮我实现吗？谢谢！

http://jsfiddle.net/UhEut/452/

HTML

<div>
    <label>
        <input id='r_popular' class='pop_others' type='radio' name='section_pop_others' disabled checked />Popular
    </label>
    <label>
        <input id='r_others' class='pop_others' type='radio' name='section_pop_others' disabled />Others
    </label>
    <button class="edit">Edit</button>
    <button class="cancel">cancel</button>
</div>

JQuery

<script>
$(document).click('.edit',function()
{
    $('input[name=section_pop_others]').attr("disabled",true);
});
$(document).click('.cancel',function()
{
    $('input[name=section_pop_others]').attr("disabled",false);
});
</script>

为什么您的代码不起作用？

$(document).click('whatever here',function(){
// This block is run for every click event occuring anywhere on the document 
}

比什么是正确的方法做到这一点：

 $('Your selector').click(function(){
   // This block will run when click event occurs on Your selector
})

更改您的代码：

$(document).click('.cancel',function()
$(document).click('.edit',function()

对此：

    $('.cancel').click(function(){
    $('.edit').click(function()

**js Fiddle**

转到此链接了解更多信息。单击

            $('.edit').click(function()
            {
            $('input[name=section_pop_others]').removeAttr("disabled");
            });
            $('.cancel').click(function()
            {
            $('input[name=section_pop_others]').attr("disabled","disabled");
            });

修改了您的代码

您将点击事件附加到文档，而不是基于选择器的元素。

点击的两个选项：

  1. .click（处理程序函数）
  2. .click（事件数据，处理程序函数）

您正在将选择器传递给事件数据。

使用选择器将单击事件附加到目标对象。

$('.edit').click(function () {
    $('input[name=section_pop_others]').attr("disabled", false);
});
$('.cancel').click(function () {
    $('input[name=section_pop_others]').attr("disabled", true);
});

正如其他人所提到的，您使用click甚至是错误的，但您还需要将事件处理程序附加到$(document).ready才能使其工作。

这项工作：

HTML:

<div>    
    <input id="r_popular" class="pop_others" type="radio" name="section_pop_others" checked="checked" />Popular
    <input id="r_popular" class="pop_others" type="radio" name="section_pop_others" />Others    
</div>   
<button class="edit">Edit</button>
<button class="cancel">cancel</button>

JavaScript:

 $(document).ready(function() {
    $('.pop_others').attr('disabled',true);
    $('.cancel').click(function() { 
        $('.pop_others').attr('disabled',true);    
    });
    $('.edit').click(function() { 
        $('.pop_others').attr('disabled',false);    
    });
 });

$('.edit').on('click',function()
{
    $('input[name=section_pop_others]').removeAttr('disabled');
});
$('.cancel').on('click',function()
{   
    $('input[name=section_pop_others]').prop("disabled",true);
});
Write click for button instead of writing to document it will trigger both the event same time.

试试这个

 $(document).ready( function () {
    $('.cancel').on ('click', function () {
        $('input[name=section_pop_others]').attr("disabled",true);
    });
    $('.edit').on ('click', function () {
       ('input[name=section_pop_others]').attr("disabled",false);
    });
 });

JSFIDDLE

相关文章：