Lock . click() on a label

Asked

Viewed 56 times

0

I have the following code:

$("input[type='radio'][class='tipo']").click(function() {           

url = $(this).attr('data-route');    
id = $(this).attr('id');   

$.ajax({
    url: url,
    type: "POST",
    dataType: "json",
    data: {
        'model' : $(this).val()
    },

    beforeSend: function () {
    },

    success: function (response) {
        
        if (response !== null) {
            
            response.forEach(function(field, i) {
                 $("div."+field.field).show().find("input, select, radio").attr("required", "req");
            })

            id === "mm"
                ?  (
                    $("label#bdj1").click(),
                    $("label#bdj2").prop("title","Essa máquina só aceita 1 bandeja"),
                    $("label#bdj2").off("click")
                   )
                :  (
                    $("label#bdj2").prop("title", ""),
                    $("label#bdj2").on("click",function() { 
                        return true; 
                    })
                   )
        }

    }
});

});
div.btnyesno > input[type="radio"] {
    display: none;
}
div.btnyesno {
    position: relative;
    display: flex;
    width: 200px;
    height: 70px;
}
div.btnyesno > div.containerball {
    position: relative;
    display: flex;
    align-items: center;
    width: 100px;
    height: 50px;
    border: 1px solid #000;
    border-radius: 500px;
}
div.btnyesno > div.containerball > div.ball {
    position: absolute;
    display: flex;
    left: 50px;
    width: 45px;
    height: 45px;
    background: #ccc;
    align-items: center;
    justify-content: center;
    border-radius: 500px;
    transition: all 500ms;
}
div.btnyesno > label{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    cursor: pointer;
}
div.btnyesno > label.yes {
    left: -10px;
}
div.btnyesno > label.no {
    right: -10px;
}
#bloq:checked ~ #label {
  left: 5px !important;
}
#desboq:checked ~ #label {
  right: 5px !important;
}       
.btnYes {
    left: 5px !important;
}
.btnNo {
    right: 5px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input 
 type='radio' 
 class='tipo' 
 name='tipo' 
 id='m5' 
 data-route='https://mvca.com.br/admn/choice/model' 
 value='m5'
>Pneumática D 430

<input 
type='radio' 
class='tipo' 
name='tipo' 
id='ac' 
data-route='https://mvca.com.br/admn/choice/model' 
value='ac'
>Acessórios

<div class="bandejas">
    <label>Bandejas</label>
    <div class="btnyesno">
        <input type="radio" name="bandejas" id="bdj_1" value="1">
        <input type="radio" name="bandejas" id="bdj_2" value="2">
        <label role="button" for="bdj_1" id="bdj1" class="yes">1</label>
        <div class="containerball"> 
            <div class="ball"></div>
        </div>
        <label role="button" for="bdj_2" id="bdj2" class="no">2</label>
    </div>
</div>

I need to deactivate the call to the event .click() but in the LABEL

e.preventDefault();

Didn’t work!

I’ve tried to Return and Return false. Also doesn’t work!

Some guidance?

EDIT:

It works like this, I have a group of radio-Buttons with the same name. OK! But here only put 2 not to pollute.

By clicking on radio that has value = "mm", then I need to deactivate the label

EDIT 2:

I’ve tried it like this

id === "mm"
    ?  (
        $("label#bdj1").click(),
        $("label#bdj2").prop("title","Essa máquina só aceita 1 bandeja"),
        $("label#bdj2").off("click")
        )
    :  (
        $("label#bdj2").prop("title", ""),
        $("label#bdj2").on("click", function(){
            console.log("Teste.....");
        })

Before selecting the radio button which is equal to "mm", the button works normally, both for one side and the other.

However, when selecting the button "mm", the off() occurs correctly. Then, when selecting again an option other than "mm", then the message is displayed

teste.....

That is, the click worked. But the button (the ball) does not run to the right!

  • If you want to remove an event is with jquery.off().

  • Guy worked. But when I click on another option you need to release the event. It would be ..on("click")? I tried and I couldn’t!

  • I’ve tried these 2 options and they don’t work $("label#bdj2"). on("click",Function() { Return true; }), $("label#bdj2"). bind("click")

  • Reinstall the event in the same way $("label#bdj2").on('click',....... . If I’m not mistaken bind() was depreciated.

  • would be true returm??? where are the .......

  • I tried that already and did not restore it. $("label#bdj2"). on("click",Function() { Return true; }). In fact I now need to restore the event so that when it is called, it is available

  • Modify the MCVE to see how you’re doing so I can get a sense of how to help you.

  • I made the changes and added comments at the end of the question! Detail: www.mcva.com.br is just an Apache Virualhost. But this has nothing to do with the doubt ok?

  • @Augustovasques. I made the changes you requested.

  • Cara pq vc does not simply put a CSS pointer-events: none; on the label?

  • then,@hugocsl worked. but I need $("label#bdj2"). prop("title","This machine only accepts 1 tray"), working and this feature is blocking the title. Is there any resource for this?

Show 6 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.