按钮点击启用和禁用单选按钮

时间:2015-10-30 12:40:50

标签: javascript jquery html

我有两个单选按钮

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>

6 个答案:

答案 0 :(得分:2)

为什么你的代码无效?

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

Go to this link to learn more about .click

答案 1 :(得分:0)

.svn

修改了你的代码

答案 2 :(得分:0)

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

点击的两个选项:

  1. .click(处理程序功能)
  2. .click(eventdata,handler function)
  3. 您正在将选择器传递给事件数据。

    使用选择器将点击事件附加到您定位的对象。

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

答案 3 :(得分:0)

正如其他人所说,您使用的是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);    
    });

 });

答案 4 :(得分:0)

$('.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.

答案 5 :(得分:0)

试试这个

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